ios - 列表中的 SwiftUI 文本字段

Question

我想要一个包含行的列表，每行中有 2 个文本字段。这些行应该保存在一个数组中，这样我就可以在其他 View 中使用数据来实现更多功能。如果更改了文本字段中的文本，则应将文本保存在数组的右侧条目中。您还可以通过按钮向列表中添加新行，这也应该更改行的数组。

目标是拥有一个键值对列表，每个键值对都是可编辑的，并且这些条目与当前文本一起保存。

有人可以帮助我和/或给我提示以解决这个问题吗？

到目前为止，我已经尝试过这样的事情:

// the array of list entries     
@State var list: [KeyValue] = [KeyValue()]

// the List inside of a VStack  
List(list) { entry in
    KeyValueRow(list.$key, list.$value)
}

// the single item
struct KeyValue: Identifiable {
    var id = UUID()

    @State var key = ""
    @State var value = ""
}

// one row in the list with view elements
struct KeyValueRow: View {

    var keyBinding: Binding<String>
    var valueBinding: Binding<String>

    init(_ keyBinding: Binding<String>, _ valueBinding: Binding<String>){
        self.keyBinding = keyBinding
        self.valueBinding = valueBinding
    }

    var body: some View {
        HStack() {
            TextField("key", text: keyBinding)
            Spacer()
            TextField("value", text: valueBinding)
            Spacer()
        }
    }
}

另外，关于添加新条目的按钮。问题是，如果我执行以下操作，我在 View 中的列表将变为空白并且所有内容再次为空(可能相关:SwiftUI TextField inside ListView goes blank after filtering list items？)

Button("Add", action: {
    self.list.append(KeyValue())
})

Answer 1

我不确定最佳实践是什么使 View 与这样的数组中的状态保持最新，但这是一种使其工作的方法。

对于模型，我添加了一个符合 Observable 对象的列表类，并且每个 KeyValue 项目都会在更改时提醒它:

class KeyValueList: ObservableObject {

    @Published var items = [KeyValue]()

    func update() {
        self.objectWillChange.send()
    }

    func addItem() {
        self.items.append(KeyValue(parent: self))
    }
}

class KeyValue: Identifiable {

    init(parent: KeyValueList) {
        self.parent = parent
    }

    let id = UUID()
    private let parent: KeyValueList

    var key = "" {
        didSet { self.parent.update() }
    }
    var value = "" {
        didSet { self.parent.update() }
    }
}

然后我能够简单地在行 View 中保留一个状态:

struct KeyValueRow: View {

    @State var item: KeyValue

    var body: some View {
        HStack() {
            TextField("key", text: $item.key)
            Spacer()
            TextField("value", text: $item.value)
            Spacer()
        }
    }
}

对于 ListView :

struct TextFieldList: View {

    @ObservedObject var list = KeyValueList()

    var body: some View {

        VStack {
            List(list.items) { item in
                HStack {
                    KeyValueRow(item: item)
                    Text(item.key)
                }
            }
            Button("Add", action: {
                self.list.addItem()
            })

        }
    }
}

我只是在其中添加了一个额外的 Text 以进行测试以查看它是否实时更新。

我没有遇到像您描述的那样使 View 空白的添加按钮。这是否也为您解决了这个问题？