SwiftUI：ScrollView内按钮背景色无法随isSelected状态切换

我来帮你搞定这个问题！你遇到的背景色不切换的问题，主要是因为状态管理的方式不对，咱们一步步来梳理和修改：

问题根源分析 #

你的代码里有两个关键错误导致状态更新无法触发UI变化：

1. @State放错了位置：@State是用来管理View内部状态的属性包装器，不应该用在数据模型（Box结构体）里。
2. 值类型的拷贝问题：Box是值类型（struct），BoxView里的box是传值的副本，你修改self.box.isSelected只是修改了副本，源数据根本没变化，自然不会触发UI更新。

修正后的代码 #

第一步：修正数据模型Box #

把@State从Box里移除，改成普通属性：

struct Box: Identifiable { 
    var id: Int 
    var title: String 
    var isSelected: Bool // 移除@State，仅保留普通属性
} 

第二步：修改BoxView使用绑定传递状态 #

用@Binding让子视图可以修改父视图中的源数据，这样状态变化会实时同步到UI：

struct BoxView: View { 
    @Binding var box: Box // 替换成@Binding，接收父视图的状态绑定
    
    var body: some View{ 
        Button(action: { 
            box.isSelected.toggle() // 直接修改绑定的属性，源数据会同步更新
        }){ 
            Text(box.title) 
                .foregroundColor(.white) 
        } 
        .frame(width: 130, height: 50) 
        .background(box.isSelected ? Color.red : Color.blue) 
        .cornerRadius(25) 
        .shadow(radius: 10) 
        .padding(10) 
    } 
}

第三步：父视图中正确传递绑定 #

在包含ScrollView的父视图里，用@State管理Box数组，并通过$符号传递绑定给BoxView：

struct ParentView: View {
    // 父视图用@State管理数据源
    @State private var boxes = [
        Box(id: 1, title: "按钮1", isSelected: false),
        Box(id: 2, title: "按钮2", isSelected: false),
        Box(id: 3, title: "按钮3", isSelected: false)
    ]
    
    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                // 用$boxes获取数组的绑定，遍历每个元素的绑定传递给子视图
                ForEach($boxes) { $box in
                    BoxView(box: $box)
                }
            }
        }
    }
}

为什么这样修改有效？ #

• @Binding相当于一个“双向通道”，子视图可以通过它修改父视图中的状态变量，避免了值类型拷贝导致的状态不同步问题。
• 父视图的@State负责管理数据源的状态，当isSelected变化时，父视图会触发重绘，所有依赖该状态的子视图（也就是BoxView）都会同步更新背景色。

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