如何在 SwiftUI 中拥有可删除的文本字段列表

Question

我尝试列出来自字符串数组的可编辑字符串和可删除字符串。

struct ShortcutSettingView: View {
    
    @State var keywords: [String] = ["keyword 1", "keyword 2", "keyword 3"]
    
    var body: some View {
        Form {
            List {
                ForEach(keywords, id: \.self) { keyword in
                    TextField("", text: $keywords[keywords.firstIndex(of: keyword)!)
                }
                .onDelete(perform: deleteKeywords)
            }
        }
        .navigationTitle(Text("Generic Shortcut"))
    }
    
    private func deleteKeywords(_ offsets: IndexSet) {
        keywords.remove(atOffsets: offsets)
    }
    
}

我尝试了以下方法，但遇到了以下两个问题：

1. 在任何TextFields 中键入一个字母后键盘消失（我认为这是由刷新视图引起的）
2. 在删除过程中出现索引超出范围错误

我可以通过以下更新修复 #2

TextField("", text: Binding<String>(get: {keywords[keywords.firstIndex(of: keyword)!] ?? "<error>"}, set: {keywords[keywords.firstIndex(of: keyword)] = $0}))

但由于键盘消失问题 (#1)，文本字段仍无法按预期使用。

Answer 1

为什么

每次用户编辑文本字段时，您都会修改关键字变量的内容。因为您的文本字段是根据该列表创建的，所以它们会被刷新。它们都被删除并重新创建，因此用户无法继续编辑。

您的第二个问题是由于您的关键字数组是由用户编辑的。因此，您需要管理删除条目。

解决方案

解决方案是不要直接根据列表中的内容创建文本字段，而是根据列表的长度。像这样替换你的 for each，你的第一个问题就解决了：

ForEach(0..<keywords.count, id: \.self) { index in
    TextField("", text: $keywords[index])
}

然后，为了解决您的第二个问题，我们必须更改检索内容的文本字段部分。我们让它使用代理绑定：

TextField("", text: Binding(
            get: { keywords[index] },
            set: { keywords[index] = $0 }))

您的最终代码应如下所示：

ForEach(0..<keywords.count, id: \.self) { index in
    TextField("", text: Binding(
                get: { keywords[index] },
                set: { keywords[index] = $0 }))
}
.onDelete(perform: deleteKeywords)