如何解决SwiftUI中Foreach生成TextField的内容同步问题

问题根源 #

1. 你当前的实现中，所有TextField都绑定到同一个homePageVM.textfieldText变量，导致输入内容同步。
2. 使用字符串数组配合ForEach(arr, id: \.self)时，若多个TextField内容相同，SwiftUI无法区分不同视图实例，会出现复用视图导致的同步问题。

解决方案 #

改用可识别的结构体存储每个TextField的独立内容，确保每个输入框绑定唯一的数据源：

步骤1：定义Identifiable结构体

创建一个带唯一ID的结构体，每个实例对应一个TextField的内容：

struct TextFieldItem: Identifiable {
    let id = UUID() // 自动生成唯一ID，确保SwiftUI能区分不同视图
    var text: String = "" // 存储对应TextField的输入内容
}

步骤2：更新视图状态变量

将原字符串数组替换为上述结构体的数组：

@State var textFieldItems: [TextFieldItem] = []
@StateObject var homePageVM: HomePageViewModel = HomePageViewModel()

步骤3：修改按钮点击逻辑

点击按钮时添加新的空TextField实例：

Button {
    textFieldItems.append(TextFieldItem())
} label: {
    Text("Button")
}

步骤4：正确渲染动态TextField

通过绑定数组元素的text属性，实现每个输入框独立输入：

ForEach($textFieldItems) { $item in
    TextField("text", text: $item.text)
}

为什么这样能解决问题 #

• 每个TextFieldItem拥有唯一的id，SwiftUI可以精准识别不同的视图，不会出现视图复用导致的同步问题。
• 每个TextField绑定到独立的item.text属性，输入内容互不干扰。

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