swiftui - 添加/删除行时，SwiftUI List/Form 动画效果不佳

Question

我有一个非常简单的文本列表，当用户点击它时，它会在里面扩展一个日期选择器。

问题是动画看起来真的很糟糕，不知道除了从头开始做整个事情之外我还能做些什么，在这一点上我宁愿只使用 UIKit。

如果您知道如何解决此问题，我将不胜感激。

这是代码：

struct ContentView: View {
    let items = ["123", "345", "678"]
    @State private var selectedItems = Set<String>()
    @State private var test = Date()

    var body: some View {
        Form {
            ForEach(items.indices) { index in
                Button(action: {
                    withAnimation {
                        if selectedItems.contains(items[index]) {
                            selectedItems.remove(items[index])
                        } else {
                            selectedItems.insert(items[index])
                        }
                    }
                }, label: {
                    Text(items[index])
                        .foregroundColor(.primary)
                })
                if selectedItems.contains(items[index]) {
                    DatePicker(selection: $test, in: ...Date(), displayedComponents: .date) {
                            }
                    .datePickerStyle(WheelDatePickerStyle())
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

ForEach(content:)应该只用于静态集合。

如果您有一个动态集合（例如在您的示例中 - 您正在添加/删除条目），您需要使用ForEach(id:content:)：

ForEach(items.indices, id: \.self) { index in

---

请注意，如果您的集合可以有重复的项目，那么id: \.self将无法正常工作，您可能需要创建一个符合的结构Identifiable。

Answer 2

Section在里面使用ForEach。

struct ContentView: View {
    let items = ["123", "345", "678"]
    @State private var selectedItems = Set<String>()
    @State private var test = Date()

    var body: some View {
        Form {
            ForEach(items.indices) { index in
                Section(header: header(index), content: {
                    if selectedItems.contains(items[index]) {
                        DatePicker(selection: $test, in: ...Date(), displayedComponents: .date) {
                                }
                        .datePickerStyle(WheelDatePickerStyle())
                    }
                })
            }
        }
    }
    
    private func header(_ index: Int) -> some View {
        Button(action: {
            withAnimation {
                if selectedItems.contains(items[index]) {
                    selectedItems.remove(items[index])
                } else {
                    selectedItems.insert(items[index])
                }
            }
        }, label: {
            Text(items[index])
                .foregroundColor(.primary)
        })
    }
}