SwiftUI中如何为List的每个Item绑定独立TextField？

问题根源 #

你当前所有列表项的TextField都绑定到同一个全局@State变量textField，所以任何一个输入框的内容变化都会同步到所有绑定该变量的TextField，导致全部同步编辑。

解决方案 #

核心思路是让每个TextField绑定到对应Item模型的独立属性上，利用你已有的Item.description字段存储每个输入框的内容，同时通过SwiftUI的Binding机制实现双向绑定。

修改后的完整代码 #

1. 调整Item模型（简化绑定逻辑）

import Foundation

struct Item: Identifiable, Codable {
    var id = UUID()
    var name: String
    var description: String = "" // 改为非可选，默认空字符串，避免绑定可选值的额外处理
}

2. 更新ContentView（使用绑定数组）

import SwiftUI

struct ContentView: View {
    @StateObject private var vm = ViewModel()
    
    var body: some View {
        VStack {
            // 使用$vm.itemList获取绑定数组，直接拿到每个Item的Binding
            List($vm.itemList) { $item in
                Text(item.name)
                TextField("Assign the value", text: $item.description)
            }
            .listStyle(.plain)
            .background(.thinMaterial)
            
            Button("Add item") {
                vm.addItem()
            }
            .padding()
        }
    }
}

#Preview {
    ContentView()
}

3. ViewModel无需额外修改

import Foundation
import SwiftUI

extension ContentView {
    @MainActor class ViewModel: ObservableObject {
        
        @Published var itemList = [Item]()
        
        let randomItems = ["Create a variables called greeting and assign the value Hello",
                           "Create a constant called car and assign bmw to it",
                           "Create an integer and assign number 25",
                           "Create a double and assign 1.50"]
       
        func addItem() {
            guard let item = randomItems.randomElement() else { return }
            let newItem = Item(name: item)
            withAnimation {
                itemList.insert(newItem, at: 0)
            }
        }
    }
}

关键说明 #

• 绑定数组：通过List($vm.itemList)可以直接获取每个Item的Binding<Item>（即$item），这样TextField就能直接绑定到该Item的description属性，实现独立编辑。
• 模型字段复用：利用已有的description字段存储输入内容，无需新增额外的全局变量。
• 可选值兼容：如果不想修改description的可选类型，也可以用TextField("Assign the value", text: $item.description ?? "")，但非可选类型的绑定逻辑更简洁。

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