SwiftUI自定义可复用ColorPicker无法在其他视图更新选中颜色

你之前的ObservableObject方案失效的核心原因是ContentView和CustomColorPicker各自初始化了独立的ColorPickerModel实例，两个实例没有关联，内部修改自然无法同步。

对于父子视图间的简单值传递，用@Binding是最轻量也最符合系统组件设计规范的方案，不需要引入额外的模型类：

自定义选择器代码 #

struct CustomColorPicker: View {
    var colors: [UIColor] = [.red, .green, .blue, .purple, .orange]
    // 用Binding代替内部State，接收外部传入的可读写值
    @Binding var selectedColor: UIColor

    var body: some View {
        VStack {
            Rectangle()
                .fill(Color(selectedColor))
                .frame(width: 45, height: 45)
            
            HStack(spacing: 0) {
                ForEach(colors, id: \.self) { color in
                    Button {
                        selectedColor = color
                    } label: {
                        Color(color)
                            .border(Color.gray, width: color == selectedColor ? 2 : 0)
                    }
                }
            }
            .frame(height: 50.0)
        }
    }
}

父视图调用代码 #

struct ContentView: View {
    // 父视图持有真实的数据源
    @State private var selectedColor = UIColor.systemGray6
    
    var body: some View {
        VStack{
            // 将父视图的State绑定传入选择器
            CustomColorPicker(selectedColor: $selectedColor)
            // 外部视图直接使用该State即可同步更新
            Rectangle()
                .fill(Color(selectedColor))
                .frame(width: 100, height: 100)
        }
    }
}

如果需要在多个不相邻的视图中共享选中颜色，可使用ObservableObject，但需要保证所有关联视图共用同一个实例：

模型代码 #

class ColorPickerModel: ObservableObject {
    @Published var selectedColor: UIColor = .systemGray6
}

自定义选择器代码 #

struct CustomColorPicker: View {
    var colors: [UIColor] = [.red, .green, .blue, .purple, .orange]
    // 不内部初始化，从外部接收模型实例
    @ObservedObject var cModel: ColorPickerModel

    var body: some View {
        VStack {
            Rectangle()
                .fill(Color(cModel.selectedColor))
                .frame(width: 45, height: 45)
            
            HStack(spacing: 0) {
                ForEach(colors, id: \.self) { color in
                    Button {
                        cModel.selectedColor = color
                    } label: {
                        Color(color)
                            .border(Color.gray, width: color == cModel.selectedColor ? 2 : 0)
                    }
                }
            }
            .frame(height: 50.0)
        }
    }
}

父视图调用代码 #

struct ContentView: View {
    // 父视图用@StateObject持有模型，负责生命周期管理
    @StateObject private var cModel = ColorPickerModel()
    
    var body: some View {
        VStack{
            // 将同一个模型实例传入选择器
            CustomColorPicker(cModel: cModel)
            // 直接使用模型属性即可同步更新
            Rectangle()
                .fill(Color(cModel.selectedColor))
                .frame(width: 100, height: 100)
        }
    }
}

• 绝大多数场景优先使用@Binding实现，和系统原生组件用法保持一致，依赖更轻，使用更灵活
• 仅当需要跨多层级、多页面共享状态时，再考虑使用ObservableObject全局注入共享实例
• 组件内部尽量不要持有数据源，所有可变状态通过参数从外部传入，降低耦合性

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