SwiftUI中List内TextField输入时所有行文本框同步变更问题求助

问题根源 #

你当前所有TextField都绑定了同一个$count变量，导致输入任意一行的内容时，所有行的文本框都会同步变化。

解决方案 #

核心思路是给每行数据分配独立的绑定变量，具体步骤如下：

1. 定义单行数据模型
   根据iOS版本选择对应的实现方式：

// iOS 17及以上（使用@Observable宏）
@Observable
struct Item {
    let id = UUID()
    var count: String = ""
}

// iOS 16及以下（使用ObservableObject）
class Item: ObservableObject {
    let id = UUID()
    @Published var count: String = ""
}

2. 声明多行数据数组
   在视图中创建存储各行数据的数组：

// iOS 17+
@State private var items: [Item] = [Item(), Item(), Item()]

// iOS 16及以下
@State private var items: [Item] = [Item(), Item(), Item()]

3. 遍历数组生成独立绑定的TextField
   循环数组时，让每个TextField绑定对应行的count属性：

// iOS 17+ 写法
List {
    ForEach($items) { $item in
        TextField("Count", text: $item.count)
            .multilineTextAlignment(.center)
            .frame(width:70, height: 15, alignment: .center)
            .textFieldStyle(PlainTextFieldStyle())
            .padding(4)
            .cornerRadius(3)
            .font(.system(size: 12))
    }
}

// iOS 16及以下写法
List {
    ForEach(items.indices, id: \.self) { index in
        TextField("Count", text: $items[index].count)
            .multilineTextAlignment(.center)
            .frame(width:70, height: 15, alignment: .center)
            .textFieldStyle(PlainTextFieldStyle())
            .padding(4)
            .cornerRadius(3)
            .font(.system(size: 12))
    }
}

修改后，每个TextField都绑定到对应行的独立数据属性，输入某一行内容时只会更新该行的文本框，不会影响其他行。

内容的提问来源于stack exchange，提问作者Khalid Aziz