SwiftUI：点击按钮唤起取色器弹窗并隐藏默认圆形按钮

要实现点击自定义按钮唤起取色器覆盖层，同时移除默认的圆形触发按钮，可通过以下两种方式实现：

方式一：弹窗式唤起取色器（推荐） #

这种方式通过自定义按钮触发弹窗，完全隐藏默认圆形按钮，点击后弹出系统取色面板作为覆盖层：

import SwiftUI

struct CustomColorPickerView: View {
    @State private var selectedColor = Color.blue
    @State private var isPickerPresented = false
    
    var body: some View {
        VStack {
            // 自定义触发按钮
            Button("选择颜色") {
                isPickerPresented = true
            }
            .buttonStyle(.borderedProminent)
            
            // 实时展示选中的颜色
            Rectangle()
                .fill(selectedColor)
                .frame(width: 100, height: 100)
                .padding()
        }
        .sheet(isPresented: $isPickerPresented) {
            // 弹窗内的取色器，隐藏默认标签
            ColorPicker("", selection: $selectedColor)
                .labelsHidden()
                .padding()
                .presentationDetents([.medium]) // 设置弹窗高度
        }
    }
}

struct CustomColorPickerView_Previews: PreviewProvider {
    static var previews: some View {
        CustomColorPickerView()
    }
}

方式二：当前视图内叠加显示取色器 #

如果需要取色器在按钮所在的frame范围内叠加显示，可将自定义按钮直接作为ColorPicker的标签，替换默认圆形：

import SwiftUI

struct EmbeddedColorPickerView: View {
    @State private var selectedColor = Color.green
    
    var body: some View {
        VStack {
            // 用自定义按钮替换ColorPicker的默认圆形标签
            ColorPicker(selection: $selectedColor, supportsOpacity: true) {
                Button("打开取色器") {
                    // 点击按钮自动唤起叠加式取色面板
                }
                .buttonStyle(.bordered)
            }
            .labelsHidden() // 彻底隐藏默认圆形按钮
            
            Rectangle()
                .fill(selectedColor)
                .frame(width: 100, height: 100)
                .padding()
        }
    }
}

struct EmbeddedColorPickerView_Previews: PreviewProvider {
    static var previews: some View {
        EmbeddedColorPickerView()
    }
}

关键说明 #

• 两种方式均通过labelsHidden()确保ColorPicker的默认圆形按钮不会显示，只保留自定义触发按钮。
• 弹窗方式更符合“点击唤起覆盖层”的直观预期，叠加方式则满足“自身frame范围内显示”的需求，可根据场景选择。

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