如何在 SwiftUI 中将苹果 ColorPicker 的布局从圆形更改为方形？

Question

ColorPicker 默认按钮样式为圆形，如下所示。

我想将圆形按钮的样式更改为矩形。但似乎没有 API 可以改变它的风格。所以我在它上面放了一个矩形，并将它的 allowedHitTesting 设置为 false 以将单击事件传输到 ColorPicker。

struct ColorPickerView: View {
    @State private var colorValue = Color.orange
    var body: some View {
        ZStack() {
            ColorPicker("", selection: $colorValue)
                .labelsHidden()
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 40, height: 40, alignment: .center)
                .allowsHitTesting(false)
        }
    }
}

但是点击后ColorPicker没有出现。

我在矩形下面画了一个圆圈来测试allowsHitTesting是否有用。它可以正常工作响应点击手势打印“点击圆圈！”。

struct ColorPickerView: View {
    @State private var colorValue = Color.orange
    var body: some View {
        ZStack() {
            ColorPicker("", selection: $colorValue)
                .labelsHidden()
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 40, height: 40, alignment: .center)
                .onTapGesture {
                    print("Circle tapped!")
                }
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 40, height: 40, alignment: .center)
                .allowsHitTesting(false)
        }
    }
}

为什么ColorPicker无法响应点击手势？或者有没有办法自定义ColorPicker按钮？

Answer 1

只需使用

opacity

，并将 ColorPicker 发送到

overlay

，如代码中所示：

---

struct SquareColorPickerView: View {
    
    @Binding var colorValue: Color
    
    var body: some View {
        
        colorValue
            .frame(width: 40, height: 40, alignment: .center)
            .cornerRadius(10.0)
            .overlay(RoundedRectangle(cornerRadius: 10.0).stroke(Color.white, style: StrokeStyle(lineWidth: 5)))
            .padding(10)
            .background(AngularGradient(gradient: Gradient(colors: [.red,.yellow,.green,.blue,.purple,.pink]), center:.center).cornerRadius(20.0))
            .overlay(ColorPicker("", selection: $colorValue).labelsHidden().opacity(0.015))
            .shadow(radius: 5.0)

    }
}

---

用例：

struct ContentView: View {
    
    @State private var colorValue = Color.orange
    
    var body: some View {

        SquareColorPickerView(colorValue: $colorValue)

    }
}

Answer 2

改进了@ios 编码器的答案以调整大小。使用

Bool

来切换方形/圆形视图将是一个不错的选择。 信用：ios 编码器。

struct EyedropperColorPicker: View {
    @Binding var colorValue: Color
    var size: CGFloat = 20
    
    var body: some View {
        colorValue
            .frame(width: size, height: size, alignment: .center)
            .cornerRadius(size * 0.25) // adjust corner radius proportional to size
            .overlay(RoundedRectangle(cornerRadius: size * 0.25)
                .stroke(Color.white, style: StrokeStyle(lineWidth: size * 0.125))) // adjust border width proportional to size
            .padding(size * 0.25) // adjust padding proportional to size
            .background(
                AngularGradient(gradient: Gradient(colors: [.red,.yellow,.green,.blue,.purple,.pink]), center: .center)
                    .cornerRadius(size * 0.5) // adjust corner radius proportional to size
            )
            .overlay(ColorPicker("", selection: $colorValue).labelsHidden().opacity(0.015))
            .shadow(radius: size * 0.125) // adjust shadow radius proportional to size
    }
}