SwiftUI中ForEach循环内如何实现复选框单独选中？

错误根源 #

你当前所有复选框都绑定到了同一个@State变量checked上，任意复选框修改该值时，所有绑定该变量的视图都会同步刷新，因此会出现所有复选框同步选中的联动效果。

修复方案 #

你需要为每一个选项单独维护独立的选中状态，和数据源一一对应即可，以下是两种可直接使用的实现方式：

方案1：用状态数组对应下标（适合固定长度的静态数据源） #

struct Screen: View {
    // 初始化和data长度一致的选中状态数组，默认全未选中，可按需修改初始值
    @State private var checkedStates: [Bool] = Array(repeating: false, count: 3)
    var data = ["1","2", "3"]

    var body: some View {
        ForEach(data.indices, id:\.self) { index in
            HStack {
                // 绑定对应下标的独立状态
                CheckBoxView(checked: $checkedStates[index])
                Text(data[index])
            }
        }
    }
}
 
struct CheckBoxView: View {
    @Binding var checked: Bool

    var body: some View {
        Image(systemName: checked ? "checkmark.square.fill" : "square")
            .foregroundColor(checked ? Color(UIColor.systemBlue) : Color.secondary)
            .onTapGesture {
                self.checked.toggle()
            }
    }
}

方案2：封装数据模型（适合动态增删的可变数据源，更稳定） #

将业务数据和选中状态封装成独立模型，避免下标错位、越界问题：

// 定义选项模型，遵循Identifiable协议方便ForEach遍历
struct OptionItem: Identifiable {
    let id = UUID()
    let content: String
    var isChecked: Bool = false
}

struct Screen: View {
    // 存储带选中状态的模型数组，状态和业务数据绑定更清晰
    @State private var options: [OptionItem] = [
        OptionItem(content: "1"),
        OptionItem(content: "2"),
        OptionItem(content: "3")
    ]

    var body: some View {
        ForEach($options) { $option in
            HStack {
                CheckBoxView(checked: $option.isChecked)
                Text(option.content)
            }
        }
    }
}

struct CheckBoxView: View {
    @Binding var checked: Bool

    var body: some View {
        Image(systemName: checked ? "checkmark.square.fill" : "square")
            .foregroundColor(checked ? Color(UIColor.systemBlue) : Color.secondary)
            .onTapGesture {
                self.checked.toggle()
            }
    }
}

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