问题描述
ColorPicker 的默认按钮样式是一个圆形,如下所示。
我想将圆形按钮的样式更改为矩形。但似乎没有 API 可以改变它的风格。所以我在它上面放了一个 Rectangle ,并将它的 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)
}
}
}
但是点击后颜色选择器没有出现。
我在 Rectangle 下方放了一个圆圈来测试 allowedHitTesting 是否有用。它可以正常响应点击手势以打印“Circle tapped!”。
struct ColorPickerView: View {
@State private var colorValue = Color.orange
var body: some View {
ZStack() {
ColorPicker("",alignment: .center)
.onTapGesture {
print("Circle tapped!")
}
Rectangle()
.foregroundColor(.blue)
.frame(width: 40,alignment: .center)
.allowsHitTesting(false)
}
}
}
为什么 ColorPicker 无法响应点击手势?或者有没有办法自定义ColorPicker按钮?
解决方法
只需使用 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)
}
}