SwiftUI嵌套循环中如何实现连续递增的计数器？

你遇到的问题根源在于：

• @State 修饰的 counter 是整个 ContentView 的全局状态，所有 Text 视图共享同一个变量。
• SwiftUI 会批量合并状态更新，当所有视图的 onAppear 回调执行完毕后，counter 最终变为8，所有视图都会同步显示这个最新值。
• 即使 onAppear 按视图出现顺序触发，状态更新的异步特性也无法保证每个视图能捕获到中间的 counter 值。

以下是几种可靠的解决方案：

方案一：直接计算索引值（推荐） #

利用二维循环的行列索引，直接计算出每个视图对应的唯一连续索引，完全不需要依赖状态变量，最符合SwiftUI声明式编程的思路。

struct ContentView: View {
    let totalRows = 3
    let totalColumns = 3
    
    var body: some View {
        ForEach(0..<totalRows, id: \.self) { row in
            ForEach(0..<totalColumns, id: \.self) { column in
                // 通过行列计算唯一索引：行号×列数 + 列号
                let index = row * totalColumns + column
                Text("Iteration #\(index)")
            }
        }
    }
}

方案二：适配动态二维数组 #

如果你的二维数组是动态生成的（而非固定3×3），可以通过enumerated()获取行列的索引：

struct ContentView: View {
    // 示例动态二维数据
    let dynamicData = [
        ["a", "b", "c"],
        ["d", "e", "f"],
        ["g", "h", "i"]
    ]
    
    var body: some View {
        ForEach(Array(dynamicData.enumerated()), id: \.offset) { rowIndex, rowItems in
            ForEach(Array(rowItems.enumerated()), id: \.offset) { columnIndex, _ in
                let index = rowIndex * rowItems.count + columnIndex
                Text("Iteration #\(index)")
            }
        }
    }
}

方案三：基于视图生命周期的独立状态存储（不推荐） #

如果必须依赖视图出现时机来赋值，可以用数组存储每个视图的独立计数，避免全局状态的干扰：

struct ContentView: View {
    // 提前初始化对应数量的状态值
    @State private var counters = Array(repeating: -1, count: 9)
    
    var body: some View {
        ForEach(0...2, id: \.self) { row in
            ForEach(0...2, id: \.self) { column in
                let index = row * 3 + column
                Text("Iteration #\(counters[index])")
                    .onAppear {
                        counters[index] = index
                    }
            }
        }
    }
}

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