如何為 SwiftUI 列表中的多行刪除過渡設置動畫？

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

期望的結果是，在不更改 position 的情況下，各個行在刪除時會淡出。 相反，發生的事情似乎所有行在被刪除之前首先相互重疊。 我已經在文本行中添加了 animation 的過渡，但這沒有影響。

Answer 1

只需將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