列表内的 SwiftUI 文本字段

Question

我想要一个包含行的列表，每行里面有 2 个文本字段。这些行应该保存在一个数组中，以便我可以在其他视图中使用数据来实现进一步的功能。如果文本字段中的文本发生更改，则文本应保存在数组的右侧条目内。您还可以通过按钮将新行添加到列表中，这也会更改行的数组。

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

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

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

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

另外，关于添加新条目的按钮。问题是，如果我执行以下操作，视图中的列表将变为空白，并且所有内容再次为空（可能相关：ListView 中的 SwiftUI TextField 在过滤列表项后变为空白？）

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

Answer 1

iOS 15 的工作代码示例

在 SwiftUI 中，Apple 建议将绑定直接传递到 List 构造函数中，并@Binding在ViewBuilder块中使用 a 来迭代每个元素。

Apple 建议使用这种方法来Indices迭代集合，因为这样不会在每次TextField值更改时重新加载整个列表（效率更高）。

新语法还可以向后部署到以前版本的 SwiftUI 应用程序。

struct ContentView: View {
  @State var directions: [Direction] = [
    Direction(symbol: "car", color: .mint, text: "Drive to SFO"),
    Direction(symbol: "airplane", color: .blue, text: "Fly to SJC"),
    Direction(symbol: "tram", color: .purple, text: "Ride to Cupertino"),
    Direction(symbol: "bicycle", color: .orange, text: "Bike to Apple Park"),
    Direction(symbol: "figure.walk", color: .green, text: "Walk to pond"),
    Direction(symbol: "lifepreserver", color: .blue, text: "Swim to the center"),
    Direction(symbol: "drop", color: .indigo, text: "Dive to secret airlock"),
    Direction(symbol: "tram.tunnel.fill", color: .brown, text: "Ride through underground tunnels"),
    Direction(symbol: "key", color: .red, text: "Enter door code:"),
  ]

  var body: some View {
    NavigationView {
      List($directions) { $direction in
        Label {
          TextField("Instructions", text: $direction.text)
        }
      }
      .listStyle(.sidebar)
      .navigationTitle("Secret Hideout")
    }
  }
}

struct Direction: Identifiable {
  var id = UUID()
  var symbol: String
  var color: Color
  var text: String
}