Question

请查看演示该问题的示例视图：

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()
    }
}

理想的结果是，在不更改位置的情况下，单独的行会淡出。相反，发生的事情似乎是所有行在删除之前先相互重叠。我已经在“文本”行中添加了带有动画的过渡，但这没有影响。

Answer 1

只需将id(:)修饰符添加到List即可删除默认动画。然后将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

如何为SwiftUI列表中的多行的移除过渡设置动画？

1 个答案: