[英]How to animate removal transition of multiple rows from SwiftUI List?
请查看演示该问题的示例视图:
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()
}
}
期望的结果是,在不更改 position 的情况下,各个行在删除时会淡出。 相反,发生的事情似乎所有行在被删除之前首先相互重叠。 我已经在文本行中添加了 animation 的过渡,但这没有影响。
只需将id(:)
修饰符添加到List
即可删除默认的 animation。 然后将transition(:)
修饰符添加到List
以获得所需的过渡。 它完美地工作。 我刚刚在 Xcode 11.5 上进行了测试。 这是我的代码...
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
谢谢。 X_X
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.