如何在SwiftUI列表中使用自定义视图平滑地扩展行单元格? [英] How to expand a row cell smoothly with a custom view in SwiftUI List?
问题描述
我正在尝试在轻击手势上扩展行单元格(这是一个自定义视图). 必须增加像元的高度,并在扩展区域中移动按钮. 但是我得到了下面的跳跃动画效果.按下的蓝卡应保持稳定,但会跳来跳去.
I am trying to expand a row cell (which is a custom view) on tap gesture. The cell height has to be increased and a button is being moved in the expanded area. But I get the following jumpy animation effect. The pressed blue card shall remain steady but instead it jumps around.
简单的代码可以重现这个跳动的动画:
Simple Code to reproduce this jumpy animation:
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("Hello, World!")
List {
Detail(isExpanded: false)
Detail(isExpanded: false)
Detail(isExpanded: false)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Detail: View {
@State var isExpanded :Bool
var body: some View {
ZStack {
ZStack {
RoundedRectangle(cornerRadius: 8)
.fill(Color(red: 0.0, green: 1.0, blue: 1.0, opacity: 1.0)).frame(height: 115)
Text("Hello, World!")
}.zIndex(3).frame(height: 115).contentShape(Rectangle()).onTapGesture {
withAnimation {
self.isExpanded.toggle()
}
}
Button(action: {
}) {
ZStack {
RoundedRectangle(cornerRadius: 50)
.fill(Color(red: 1.0, green: 0.0, blue: 1.0, opacity: 1.0)).frame(height: 70)
.cornerRadius(8)
.shadow(radius: 3)
Text("Test")
}
}.padding([.leading, .trailing], 12)
.padding(.top, 6)
.frame(height: 70)
.buttonStyle(BorderlessButtonStyle())
.offset(y: self.isExpanded ? 0 : 40)
.disabled(!self.isExpanded)
}.frame(height: self.isExpanded ? 120 : 200)
}
}
我非常感谢您提供有关如何解决此问题的任何提示或提示.
I am grateful for any tips or hints on how to smoothe this out.
编辑
单击时,hello world卡应保持在单元格本身顶部的对齐状态.像这样:
When clicked the hello world card should remain aligned at the top in the cell itself. Like so:
推荐答案
Just use animatable modifier from this my solution
通过Xcode 11.4/iOS 13.4测试
Tested with Xcode 11.4 / iOS 13.4
ZStack {
// .. other your code here
}
.modifier(AnimatingCellHeight(height: self.isExpanded ? 120 : 200))
这篇关于如何在SwiftUI列表中使用自定义视图平滑地扩展行单元格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!