SwiftUI添加带条件Spacer后按钮切换正常但外观不更新的原因

这个问题的核心在于SwiftUI的视图身份识别与diffing算法逻辑。当你在ForEach里给除最后一个按钮外的元素添加Spacer()时，每个循环迭代生成的视图结构变得不一致：前4个按钮后跟着Spacer，最后一个按钮没有。

你当前使用的是基于范围的ForEach(0..<completionPercent.count)，SwiftUI默认会通过视图在层级中的位置来识别每个元素。当percentSelected状态变化时，SwiftUI尝试对比新旧视图树，但由于结构不一致（部分位置有Spacer、部分没有），它无法正确将更新后的状态关联到对应的按钮视图，导致UI没有刷新——尽管你的状态变量percentSelected确实已经改变了（从print输出能验证这一点）。

而当你去掉条件、给每个按钮都加Spacer时，所有迭代的视图结构完全一致，SwiftUI的diffing算法可以精准匹配视图，状态变化就能正常反映到UI上。

有两种简单的修复方式，都能让SwiftUI正确跟踪视图身份：

方法1：给ForEach指定明确的ID #

修改ForEach的写法，显式使用索引作为唯一标识，让SwiftUI不再依赖位置识别视图：

ForEach(completionPercent.indices, id: \.self) { i in
    Button(action: {
        self.percentSelected = i
        print(self.percentSelected)
    }) {
        GenericFilterButton(category: self.completionPercent[i], textColor: self.percentSelected == i ? Color.white : Color.black.opacity(0.5), buttonColor: self.percentSelected == i ? Color.blue : Color.white.opacity(0.0))
    }
    if i != 4 {
        Spacer()
    }
}

completionPercent.indices和原来的0..<completionPercent.count是等价的，但加上id: \.self后，SwiftUI会用索引值作为每个视图的唯一标识，即使视图结构有条件差异，也能正确关联状态更新。

方法2：保持每个迭代的视图结构一致 #

另一种思路是让每个循环的视图结构完全统一，避免条件带来的结构差异。可以给最后一个按钮也添加Spacer，但将其宽度设为0：

ForEach(0..<completionPercent.count) { i in
    Button(action: {
        self.percentSelected = i
        print(self.percentSelected)
    }) {
        GenericFilterButton(category: self.completionPercent[i], textColor: self.percentSelected == i ? Color.white : Color.black.opacity(0.5), buttonColor: self.percentSelected == i ? Color.blue : Color.white.opacity(0.0))
    }
    Spacer()
        .frame(width: i == 4 ? 0 : nil)
}

这样每个迭代都有Spacer，只是最后一个的宽度被设为0，视觉效果和原来一致，但视图结构完全统一，SwiftUI的diffing算法可以正常工作。

如果你的completionPercent数组内容可能发生变化，更推荐使用基于元素的ForEach（结合enumerated()），比如：

ForEach(Array(completionPercent.enumerated()), id: \.element) { index, item in
    Button(action: {
        self.percentSelected = index
        print(self.percentSelected)
    }) {
        GenericFilterButton(category: item, textColor: self.percentSelected == index ? Color.white : Color.black.opacity(0.5), buttonColor: self.percentSelected == index ? Color.blue : Color.white.opacity(0.0))
    }
    if index != 4 {
        Spacer()
    }
}

这样即使数组元素顺序变化，SwiftUI也能通过元素本身识别视图，比依赖索引更可靠。

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