SwiftUI移除数组元素时ForEach崩溃问题求助

这个崩溃的核心原因是你依赖易变的数组索引作为ForEach的标识符，同时直接通过索引绑定数组元素。当数组元素被移除时，SwiftUI的视图更新机制可能跟不上数据的变化，导致视图尝试访问已经不存在的索引，最终触发越界错误。

问题拆解 #

你用了两层基于整数范围的ForEach（ForEach(0 ..< rowsCount, id: \.self)和ForEach(firstCellInRowIndex ... lastCellInRowIndex, id: \.self)），这种方式下，SwiftUI把索引当作视图的唯一标识。当你通过counter减少数组元素时，旧的索引可能还在视图树中被引用，但数组已经缩短，此时访问$model.cellModels[elementIndex]就会直接越界。

解决方案：用稳定的唯一标识符替代索引 #

我们需要给数据模型添加稳定的ID，让SwiftUI能准确跟踪每个元素的生命周期，同时重构布局逻辑避免手动计算索引。

步骤1：给CellModel添加唯一标识符

修改CellModel，让它拥有一个不变的UUID作为唯一标识，同时遵循Identifiable（让ForEach使用更简洁）：

struct PickerElement: Hashable { 
    let id: Int 
    let title: String 
    let value: Int 
}

// 修改后的CellModel
struct CellModel: Identifiable, Hashable {
    let id = UUID() // 稳定的唯一标识符
    var element: PickerElement? 
    var error: String? 
}

struct PickerButton: View { 
    @Binding var value: PickerElement? 
    @Binding var error: String? 
    // 你的PickerButton实现...
}

步骤2：重构布局逻辑，预先分组

在视图中添加一个计算属性，把cellModels自动分成每2个一组的行，避免手动计算行和元素索引：

class MyModel: ObservableObject { 
    @Published var counter = 0 
    @Published var cellModels = [CellModel]() 
    private var cancellables = Set<AnyCancellable>() 

    init() {
        $counter.sink { value in
            let diff = value - self.cellModels.count 
            if diff > 0 { 
                self.cellModels.append(contentsOf: Array(repeating: CellModel(), count: diff) ) 
            } else if diff < 0 { 
                self.cellModels = Array( self.cellModels.prefix(value) ) 
            } 
        }.store(in: &cancellables) 
    }
}

struct MyView: View { 
    @ObservedObject var model: MyModel 

    // 自动将cellModels分成每2个一组的行
    private var groupedRows: [[CellModel]] {
        var rows = [[CellModel]]()
        var currentRow = [CellModel]()
        
        for cell in model.cellModels {
            currentRow.append(cell)
            if currentRow.count == 2 {
                rows.append(currentRow)
                currentRow = []
            }
        }
        
        if !currentRow.isEmpty {
            rows.append(currentRow)
        }
        
        return rows
    }

    var body: some View { 
        VStack(spacing: 8) { 
            layOutElements() 
        } 
    } 

    @ViewBuilder func layOutElements() -> some View { 
        if !model.cellModels.isEmpty { 
            VStack { 
                HStack { 
                    Spacer() 
                    Text("Some title").font(.caption) 
                    Spacer() 
                }.padding() 

                // 遍历分组后的行，用行的元素作为标识
                ForEach(groupedRows.indices, id: \.self) { rowIndex in
                    let row = groupedRows[rowIndex]
                    layOutRow(row: row, isLastRow: rowIndex == groupedRows.count - 1)
                }
            } 
        } 
    } 

    @ViewBuilder private func layOutRow(row: [CellModel], isLastRow: Bool) -> some View { 
        HStack(alignment: .top, spacing: 8) { 
            // 遍历行内元素，用元素的id作为稳定标识
            ForEach(Array(zip(model.cellModels.indices, model.cellModels)), id: \.1.id) { index, cell in
                // 只显示当前行包含的元素
                if row.contains(cell) {
                    PickerButton(
                        value: $model.cellModels[index].element,
                        error: $model.cellModels[index].error
                    )
                }
            }

            // 最后一行只有一个元素时添加占位Spacer
            if isLastRow && row.count == 1 {
                Spacer()
                    .frame(minWidth: 0, maxWidth: .infinity)
            }
        } 
    }
}

为什么这样能解决问题 #

1. 稳定的标识符：每个CellModel的UUID不会随着数组变化而改变，SwiftUI能准确识别哪个元素被移除，从而正确更新视图树。
2. 避免手动索引计算：通过预先分组的方式，我们不再需要手动计算firstCellInRowIndex这类容易出错的索引，减少了越界的可能性。
3. 视图与数据同步：ForEach基于元素的ID跟踪视图，当数组元素被移除时，对应的视图会被立即销毁，不会出现视图引用旧索引的情况。

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