[英]How to animate removal transition of multiple rows from SwiftUI List?
Please see this sample view that demonstrates the problem:请查看演示该问题的示例视图:
struct ListRemovalTransition: View {
let list1 = ["A", "B", "C", "D"]
let list2 = ["A", "E", "F", "G", "H", "I", "J", "K"]
@State var toggle = false
var chosenList: [String] {
toggle ? list1 : list2
}
var body: some View {
VStack {
Toggle(isOn: $toggle) {
Text("Switch List")
}
List(chosenList, id: \.self) { item in
Text(item)
.transition(AnyTransition.opacity.animation(.default))
}
}
.padding()
}
}
struct ListRemovalTransition_Previews: PreviewProvider {
static var previews: some View {
ListRemovalTransition()
}
}
The desired outcome is that the individual rows fade out when removed without changing position.期望的结果是,在不更改 position 的情况下,各个行在删除时会淡出。 Instead what's happening seems like all the rows first overlap each other before being removed.
相反,发生的事情似乎所有行在被删除之前首先相互重叠。 I've added a transition with animation to the row Text but this has no impact.
我已经在文本行中添加了 animation 的过渡,但这没有影响。
Just add id(:)
modifier to List
to remove default animation.只需将
id(:)
修饰符添加到List
即可删除默认的 animation。 Then add transition(:)
modifier to List
for your desirable transition.然后将
transition(:)
修饰符添加到List
以获得所需的过渡。 It works perfectly.它完美地工作。 I just tested on Xcode 11.5.
我刚刚在 Xcode 11.5 上进行了测试。 Here is my code...
这是我的代码...
struct ListRemovalTransition: View {
let list1 = ["A", "B", "C", "D"]
let list2 = ["A", "E", "F", "G", "H", "I", "J", "K"]
@State var toggle = false
var chosenList: [String] {
toggle ? list1 : list2
}
var body: some View {
VStack {
Toggle(isOn: $toggle) {
Text("Switch List")
}
List(chosenList, id: \.self) { item in
Text(item)
}
.id(UUID())
.transition(AnyTransition.opacity.animation(.default))
}
.padding()
}
}
https://media.giphy.com/media/dVu1CMqk3YdtZHefaE/giphy.gif https://media.giphy.com/media/dVu1CMqk3YdtZHefaE/giphy.gif
Thanks.谢谢。 X_X
X_X
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.