ColorPicker

ColorPicker 是一个用户界面控件，允许用户选择颜色。它提供了一个标准的颜色选择界面，在 iOS 上呈现为颜色选择器弹窗，在 macOS 上则显示系统颜色面板。视图绑定到 Color 实例。

创建 ColorPicker

基本初始化方法

1/// 创建一个从局部化字符串键生成标签的颜色选择器
2init(_ titleKey: LocalizedStringKey, selection: Binding<Color>, supportsOpacity: Bool = true)
3
4/// 创建一个显示自定义标签的颜色选择器
5init(selection: Binding<Color>, supportsOpacity: Bool = true, @ViewBuilder label: () -> Label)
6
7/// 创建一个从 Image 生成标签的颜色选择器
8init(_ titleKey: LocalizedStringKey, selection: Binding<Color>, supportsOpacity: Bool = true, @ViewBuilder label: () -> Label) where Label == Image

参数说明

№	参数	说明
0	`titleKey`	描述选择目的的本地化字符串键
1	`selection`	绑定到当前选中颜色的属性
2	`supportsOpacity`	是否支持不透明度选择，默认为 `true`
3	`label`	自定义标签视图

示例：基本颜色选择

1struct BasicColorPicker: View {
2    @State private var selectedColor = Color.blue
3    
4    var body: some View {
5        ColorPicker("选择颜色", selection: $selectedColor)
6    }
7}

控制不透明度

使用 supportsOpacity 参数控制是否允许用户调整颜色的不透明度：

1// 支持不透明度选择（默认）
2ColorPicker("带透明度", selection: $color, supportsOpacity: true)
3
4// 不支持不透明度选择
5ColorPicker("不透明", selection: $color, supportsOpacity: false)

自定义标签

使用系统图片

1ColorPicker(selection: $selectedColor) {
2    Label("颜色", systemImage: "paintpalette.fill")
3}

使用自定义视图

1ColorPicker(selection: $selectedColor) {
2    HStack {
3        Image(systemName: "paintbrush.fill")
4            .foregroundStyle(selectedColor)
5        Text("主题颜色")
6    }
7}

使用本地化图片

1ColorPicker("选择颜色", selection: $selectedColor) {
2    Image("color-icon")
3}

在表单中使用

ColorPicker 常用于表单或设置界面中：

 1struct ThemeSettingsView: View {
 2    @State private var primaryColor = Color.blue
 3    @State private var backgroundColor = Color.white
 4    @State private var accentColor = Color.orange
 5    
 6    var body: some View {
 7        Form {
 8            Section(header: Text("主题颜色")) {
 9                ColorPicker("主要颜色", selection: $primaryColor)
10                ColorPicker("背景颜色", selection: $backgroundColor, supportsOpacity: false)
11                ColorPicker("强调色", selection: $accentColor)
12            }
13            
14            Section(header: Text("预览")) {
15                RoundedRectangle(cornerRadius: 10)
16                    .fill(backgroundColor)
17                    .frame(height: 100)
18                    .overlay {
19                        VStack {
20                            Circle()
21                                .fill(primaryColor)
22                                .frame(width: 40, height: 40)
23                            Text("主题预览")
24                                .foregroundStyle(accentColor)
25                        }
26                    }
27            }
28        }
29    }
30}

颜色模型转换

ColorPicker 返回的 Color 对象可以转换为不同的颜色模型：

 1struct ColorConversionExample: View {
 2    @State private var color = Color.red
 3    
 4    var body: some View {
 5        VStack {
 6            ColorPicker("选择颜色", selection: $color)
 7            
 8            // 转换为 UIColor
 9            if let uiColor = UIColor(color).cgColor.components {
10                Text("RGB: \(uiColor[0]), \(uiColor[1]), \(uiColor[2])")
11            }
12            
13            // 使用 Color 资源
14            RoundedRectangle(cornerRadius: 8)
15                .fill(color)
16                .frame(width: 100, height: 100)
17        }
18    }
19}

完整示例

以下示例展示了一个简单的调色板视图：

 1import SwiftUI
 2
 3struct ColorPaletteView: View {
 4    @State private var selectedColor = Color.blue
 5    @State private var savedColors: [Color] = []
 6    @State private var showOpacity = true
 7    
 8    var body: some View {
 9        VStack(spacing: 20) {
10            // 颜色预览
11            RoundedRectangle(cornerRadius: 12)
12                .fill(selectedColor)
13                .frame(height: 150)
14                .shadow(radius: 5)
15                .padding()
16            
17            // 颜色选择器
18            ColorPicker("选择颜色", selection: $selectedColor, supportsOpacity: showOpacity)
19                .padding()
20            
21            // 不透明度控制
22            Toggle("支持透明度", isOn: $showOpacity)
23                .padding(.horizontal)
24            
25            // 已保存的颜色
26            if !savedColors.isEmpty {
27                VStack(alignment: .leading) {
28                    Text("已保存的颜色")
29                        .font(.headline)
30                    
31                    ScrollView(.horizontal, showsIndicators: false) {
32                        HStack {
33                            ForEach(savedColors, id: \.self) { color in
34                                Circle()
35                                    .fill(color)
36                                    .frame(width: 40, height: 40)
37                                    .onTapGesture {
38                                        selectedColor = color
39                                    }
40                            }
41                        }
42                    }
43                }
44                .padding()
45            }
46            
47            // 保存按钮
48            Button("保存当前颜色") {
49                savedColors.append(selectedColor)
50            }
51            .buttonStyle(.borderedProminent)
52            
53            Spacer()
54        }
55        .navigationTitle("调色板")
56    }
57}

平台支持

№	平台	最低版本
0	iOS	14.0+
1	iPadOS	14.0+
2	Mac Catalyst	14.0+
3	macOS	11.0+
4	visionOS	1.0+

注意事项

ColorPicker 在 macOS 上会显示系统颜色面板，在 iOS 上显示内联颜色选择器
默认情况下，ColorPicker 支持选择不透明度
如果需要精确的颜色值，建议使用 UIColor 或 NSColor 进行转换
ColorPicker 支持系统颜色和自定义颜色，用户可以从预设颜色中选择或自定义颜色
在表单中使用 ColorPicker 时，它会自动适配表单样式