自定义可重用拾色器不更新其他视图中的颜色

Question

以下代码成功显示一组颜色，并在点击颜色时显示 selected 颜色，类似于标准 ColorPicker。我希望能够在其他视图中使用此自定义颜色选择器，其方式与标准 ColorPicker 类似。我的问题是我无法将 selected 颜色暴露给其他视图。

内容视图：

    struct ContentView: View {
        var body: some View {
            VStack{
            CustomColorPicker()
            }
        }
    }

自定义拾色器：

    struct CustomColorPicker: View {
        var colors: [UIColor] = [.red, .green, .blue, .purple, .orange]
        
        @State var selectedColor = UIColor.systemGray6

        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)
            }
        }
    }

我已经使用 model/ObservableObject 绑定，以便能够在其他视图中捕获 selected 颜色，但是当您 select 颜色时它不会。

如何让 ContentView 中的 Rectangle 在点击颜色选择器中的颜色时更新其填充颜色？

或者一般来说，创建可重复使用的自定义颜色选择器的最佳方法是什么？

使用 ObservableObject

内容视图

    struct ContentView: View {
        
        @ObservedObject var cModel = ColorPickerModel()
        
        var body: some View {
            VStack{
            CustomColorPicker()
                
                Rectangle()
                    .fill(cModel.selectedColor)
                    .frame(width: 100, height: 100)
            }
        }
    }

自定义颜色选择器

    class ColorPickerModel:ObservableObject{
        @Published var selectedColor:Color = Color.orange
    }

    struct CustomColorPicker: View {
        var colors: [UIColor] = [.red, .green, .blue, .purple, .orange]
        
        @StateObject var cModel = ColorPickerModel()

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

Answer 1

import SwiftUI

struct MyColorView: View {
    //Source of truth
    @StateObject var cModel = MyColorViewModel()
    
    var body: some View {
        VStack{
            CustomColorPicker(selectedColor: $cModel.selectedColor)
            
            Rectangle()
            //Convert to the View Color
                .fill(Color(cModel.selectedColor))
                .frame(width: 100, height: 100)
        }
    }
}
//This will serve as the source of truth for this View and any View you share the ObservableObject with
//Share it using @ObservedObject and @EnvironmentObject
class MyColorViewModel:ObservableObject{
    //Change to UIColor the types have to match
    @Published var selectedColor: UIColor = .orange
}
struct CustomColorPicker: View {
    var colors: [UIColor] = [.red, .green, .blue, .purple, .orange]
    //You can now use this Picker with any Model
    //Binding is a two-way connection it needs a source of truth
    @Binding var selectedColor: UIColor
    
    var body: some View {
        VStack {
            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 MyColorView_Previews: PreviewProvider {
    static var previews: some View {
        MyColorView()
    }
}

尝试 Apple SwiftUI Tutorials 它们是一个好的开始。

自定义可重用拾色器不更新其他视图中的颜色

Custom Reusable Color Picker not updating colors in other views

swiftui

color-picker

observableobject

内容视图：

自定义拾色器：

使用 ObservableObject

内容视图

自定义颜色选择器