如何放大SwiftUI ColorPicker并移除其外部灰色区域

默认的ColorPicker自带灰色背景区域，使用scaleEffect会将整个组件（包括灰色背景）一起缩放，要只保留蓝色主体，可尝试以下几种方法：

• 裁剪多余区域
  利用clipShape将视图裁剪为蓝色主体的胶囊形状，直接去掉外部灰色部分：

  ColorPicker("", selection: $color.selectedColor)
      .scaleEffect(x:4, y:10)
      .clipShape(Capsule())
  

• 自定义样式完全控制外观
  自定义ColorPicker样式，只保留颜色显示和交互逻辑，彻底摆脱默认灰色背景：

  struct CustomColorPickerStyle: ColorPickerStyle {
      func makeBody(configuration: Configuration) -> some View {
          configuration.label
              .frame(width: 160, height: 40)
              .background(configuration.selectedColor)
              .clipShape(Capsule())
              .onTapGesture {
                  configuration.showPicker()
              }
      }
  }
  
  // 使用自定义样式
  ColorPicker("", selection: $color.selectedColor)
      .colorPickerStyle(CustomColorPickerStyle())
  

• 清除默认背景
  先将默认灰色背景替换为透明，再配合裁剪：

  ColorPicker("", selection: $color.selectedColor)
      .scaleEffect(x:4, y:10)
      .background(Color.clear)
      .clipShape(Capsule())
  

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