SwiftUI如何让Button同步@EnvironmentObject的Bool状态并解决数组越界问题

问题根因 #

1. 下标越界核心来自SwiftUI的视图复用逻辑：你使用ForEach(query.frames.indices, id: \.self)渲染按钮，以索引作为视图的唯一标识。当从高frame数量的容器（比如8个frame的桶）切换到低frame数量的容器（比如3个frame的包）时，SwiftUI会复用之前渲染的高索引视图，尝试访问query.frames[3]及以上索引的元素，此时数组长度已经缩短为3，直接访问就会触发越界崩溃。
2. 你定位的颜色赋值行确实是崩溃触发点：当你改成固定颜色时，视图body内不需要读取query.frames[value]的值，即使存在多余的复用视图，也不会触发越界访问，所以不会崩溃，但同时也不会响应frames数组的状态变化，出现UI不更新的问题。
3. 多余的状态赋值导致更新时序异常：onChange回调触发时已经完成了selectedContainer的赋值，你在回调中再次给query.selectedContainer = tag会重复触发变更回调，导致状态更新逻辑混乱，进一步加重UI不刷新的问题。
4. 自动重置逻辑未生效：你在切换单个frame的状态后没有调用satisfiedFrames方法，所以所有frame都为false时的自动重置逻辑不会触发。

修复方案 #

1. 强制容器切换时重绘按钮组 #

给TheHStack的外层容器添加id修饰符，绑定到当前选中的容器索引，切换容器时会销毁旧的按钮组，完全重绘新的按钮组，彻底避免视图复用导致的越界问题：

struct TheHStack: View {
    @EnvironmentObject var query: Query
    var body: some View {
        print(query.frames)
        return HStack (spacing: 10) {
            ForEach(query.frames.indices, id: \.self) { value in
                ColouredText(value: value)
            }
        }
        // 新增这行即可
        .id(query.selectedContainer)
    }
}

2. 优化颜色访问逻辑，消除越界风险 #

给颜色数组的访问添加索引合法性判断，避免特殊场景下的颜色数组越界，同时补上自动重置逻辑的调用：

struct ColouredText: View {
    @EnvironmentObject var query: Query
    var value: Int
    var body: some View {
        Button(action: {
            query.frames[value].toggle()
            // 新增这行，触发全false自动重置逻辑
            query.satisfiedFrames()
            print(query.frames)
            print("\(value)")
        }, label: {
            Text("\(value + 1)")
                // 修改颜色赋值逻辑，添加索引校验
                .foregroundColor(query.frames[value] ? (dvColors.indices.contains(value) ? dvColors[value] : .gray) : .gray)
        })
    }
}

3. 删除多余的状态赋值 #

修改changeContainer方法，删除重复的selectedContainer赋值逻辑，避免状态更新混乱：

func changeContainer(_ tag: Int) {
    print("CHANGE CONTAINER ON PICKER")
    print("TAG: \(tag)")
    // 删掉多余的赋值行 query.selectedContainer = tag
    print("QUERY CONTAINER: \(query.selectedContainer)")
    query.resetFrames()
    print("FRAMES COUNT:  \(query.frames.count)")
}

修改完成后即可完全符合你的预期效果：切换容器时对应frame全重置为true，点击可切换单个frame状态，全为false时自动重置，UI正常同步更新。

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