SwiftUI如何点击其他视图触发打开ColorPicker而无需点击自带小圆圈

以下分两种兼容场景提供可直接运行的实现： #

方案1：全版本兼容（iOS 14+/macOS 11+） #

直接使用ColorPicker的自定义Label构造器，将你需要响应点击的视图作为ColorPicker的Label即可，此时点击整个自定义视图区域都会唤起颜色选择器，不需要额外编写onTapGesture逻辑。
如果需要同时保留原有的ColorPicker文本+圆形色块显示，也可以直接叠加实现：

struct ContentView: View {
    @State private var selectedColor = Color.purple
    
    var body: some View {
        VStack {
            // 原有显示的ColorPicker
            ColorPicker("Color picker :", selection: $selectedColor, supportsOpacity: false)
                .padding()
            
            // 点击即可唤起选择器的自定义色块
            ColorPicker(selection: $selectedColor, supportsOpacity: false) {
                Rectangle()
                    .foregroundColor(selectedColor)
                    .frame(height: 100)
            }
        }
        .padding()
    }
}

如果不想额外新增ColorPicker实例，也可以将透明的ColorPicker覆盖在目标视图上方：

Rectangle()
    .foregroundColor(selectedColor)
    .frame(height: 100)
    .overlay {
        ColorPicker("", selection: $selectedColor, supportsOpacity: false)
            .opacity(0.01) // 完全透明不影响视觉效果，但是可以正常响应点击事件
    }

方案2：iOS 16+/macOS 13+ 手动控制弹出逻辑 #

如果你需要更灵活的触发规则（比如点击后先执行其他自定义操作再弹出选择器），可以用系统提供的弹出修饰符手动控制显示状态：

struct ContentView: View {
    @State private var selectedColor = Color.purple
    @State private var showColorPicker = false
    
    var body: some View {
        VStack {
            ColorPicker("Color picker :", selection: $selectedColor, supportsOpacity: false)
                .padding()
            
            Rectangle()
                .foregroundColor(selectedColor)
                .frame(height: 100)
                .onTapGesture {
                    // 可在此处插入你需要的自定义业务逻辑
                    showColorPicker = true
                }
        }
        .padding()
        // 手动绑定颜色选择器的弹出状态
        .colorPicker(isPresented: $showColorPicker, selection: $selectedColor, supportsOpacity: false)
    }
}

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