title: How can I change layout of apple ColorPicker from Circle to Square in SwiftUI?
body: <p>The default button style of ColorPicker is a circle as bellow.</p>
  <p><a href="https://i.stack.imgur.com/DImAd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DImAd.png" alt="enter image description here" /></a></p>
  <p>I want to change the style of the circle button to Rectangle. But seems no API can change it style. So I put a Rectangle over it , and set it allowsHitTesting to false to transport click event to ColorPicker.</p>
  <p><a href="https://i.stack.imgur.com/R3AiB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R3AiB.png" alt="enter image description here" /></a></p>
  <pre><code>struct ColorPickerView: View {
      @State private var colorValue = Color.orange
      var body: some View {
          ZStack() {
              ColorPicker(&quot;&quot;, selection: $colorValue)
                  .labelsHidden()
              Rectangle()
                  .foregroundColor(.blue)
                  .frame(width: 40, height: 40, alignment: .center)
                  .allowsHitTesting(false)
          }
      }
  }
  </code></pre>
  <p>But the ColorPicker did not present after click.</p>
  <p>I put a circle bellow the Rectangle to test whether allowsHitTesting is useful. It can work properly responding to tap gesture to print &quot;Circle tapped!&quot;.</p>
  <pre><code>struct ColorPickerView: View {
      @State private var colorValue = Color.orange
      var body: some View {
          ZStack() {
              ColorPicker(&quot;&quot;, selection: $colorValue)
                  .labelsHidden()
              Rectangle()
                  .foregroundColor(.blue)
                  .frame(width: 40, height: 40, alignment: .center)
                  .onTapGesture {
                      print(&quot;Circle tapped!&quot;)
                  }
              Rectangle()
                  .foregroundColor(.blue)
                  .frame(width: 40, height: 40, alignment: .center)
                  .allowsHitTesting(false)
          }
      }
  }
  </code></pre>
  <p>Why the ColorPicker can not responding to tap gesture? Or Is there a way to customize the ColorPicker button？</p>