LazyVGrid嵌套ForEach与TextField输入异常及ID问题求助

环境信息 #

• Xcode 14.2
• macOS Monterey 12.6.2
• iOS最低部署版本15.5

问题场景 #

需要在2x2的LazyVGrid中展示4个用于整数输入的TextField，数据绑定到外部ObservableObject类型的Model中，且已通过@main注入环境变量。遇到以下问题：

1. 不给TextField加.id修饰符时，控制台报错：

LazyVGridLayout: the ID 0 is used by multiple child views, this will give undefined results!
LazyVGridLayout: the ID 1 is used by multiple child views, this will give undefined results!

2. 使用.id(row + col)时，仍存在ID冲突报错：

LazyVGridLayout: the ID 1 is used by multiple child views, this will give undefined results!

3. 使用.id(UUID())时，TextField输入首字符后软件键盘自动消失，无法输入多位数。
4. 用.id(row + 7 * col)能正常工作，但这是临时方案，不符合规范。

原代码 #

struct ContentView: View {
    let colums = [GridItem(),GridItem()]
    @EnvironmentObject var model: Model

    
    var body: some View {
        List {
            LazyVGrid(columns: colums) {
                ForEach(0...1, id:\.self) { row in
                    ForEach(0...1, id: \.self) { col in
                        TextField("", value: $model.rows[row].values[col], format: .number)
                            .id(UUID())
//                            .id(row + 7 * col)

                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


class Model: ObservableObject {
    @Published
    var rows = [Values(), Values()]
    
    struct Values {
        var values = [0, 0]
    }
}


@main
struct KeyboardFocusApp: App {
    @StateObject var model = Model()
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(model)
        }
    }
}

问题根源 #

1. ID重复问题：
   嵌套ForEach中，内层ForEach的id用\.self时，行0列1和行1列0的row+col结果都是1，导致ID重复，触发LazyVGrid的冲突报错。
2. 不稳定ID导致焦点丢失：
   使用UUID()时，每次视图刷新（比如输入字符触发@Published变量更新）都会生成新的UUID，TextField会被视为全新视图，焦点直接丢失，键盘随之收起。
3. LazyVGrid的视图管理逻辑：
   LazyVGrid依赖子视图的唯一稳定ID来跟踪视图复用和状态，重复或不稳定的ID都会破坏其内部机制，引发异常。

正确解决方案 #

方案1：生成唯一稳定的组合ID #

直接通过row * 2 + col计算每个TextField的唯一ID，2x2网格中会生成0、1、2、3四个不重复的固定ID，彻底解决冲突：

TextField("", value: $model.rows[row].values[col], format: .number)
    .id(row * 2 + col)

方案2：让数据模型实现Identifiable（更规范） #

修改Model结构，让每个可绑定的元素拥有稳定的唯一ID，符合SwiftUI的设计理念：

class Model: ObservableObject {
    @Published var rows = [
        Row(id: UUID(), values: [
            ValueItem(id: UUID(), value: 0),
            ValueItem(id: UUID(), value: 0)
        ]),
        Row(id: UUID(), values: [
            ValueItem(id: UUID(), value: 0),
            ValueItem(id: UUID(), value: 0)
        ])
    ]
    
    struct Row: Identifiable {
        let id: UUID
        var values: [ValueItem]
    }
    
    struct ValueItem: Identifiable {
        let id: UUID
        var value: Int
    }
}

同步修改ContentView的ForEach遍历逻辑，直接绑定到可标识的元素：

struct ContentView: View {
    let columns = [GridItem(), GridItem()]
    @EnvironmentObject var model: Model
    
    var body: some View {
        List {
            LazyVGrid(columns: columns) {
                ForEach($model.rows) { $row in
                    ForEach($row.values) { $item in
                        TextField("", value: $item.value, format: .number)
                            .id(item.id)
                    }
                }
            }
        }
    }
}

这种方式无需手动计算ID，利用Identifiable协议确保每个元素的标识稳定唯一，从根源上避免ID冲突和焦点丢失问题。

内容的提问来源于stack exchange，提问作者Heinz M.