SwiftUI - 颜色选择器

在 SwiftUI 中，ColorPicker 是一个内置 UI 组件，使用户能够从调色板中选择颜色。这是一个用于颜色选择的简单界面。它始终嵌入在视图中。

我们可以在各种容器(如 VStack、HStack、List 等)中包含颜色选择器。ColorPicker 组件显示当前选定的颜色以及一个大型系统调色板，用户可以从中选择新颜色。

语法

以下是语法 −

ColorPicker 需要一个保存所选颜色的状态变量。这里当前选择的颜色是红色。

@State var myColor = Color.red
ColorPicker(_titlekKey: LocalizedStringKey, choice: Binding<CGColor>, supportsOpacity:Bool = true)

参数

此函数采用以下参数 −

• text: 将在视图上显示的文本。或者我们可以说它是颜色选择器的标签。
• selection: 它包含与状态变量的绑定链接。
• supportOpacity: 它用于检查给定的颜色选择器是否允许调整不透明度。此参数的默认值为 true。

示例

以下 SwiftUI 程序用于在视图上显示静态文本。

import SwiftUI

struct ContentView: View {
   @State private var myColor: Color = .yellow
   var body: some View {
      VStack{
         Image(systemName:"heart.fill")
            .font(.largeTitle)
            .background(myColor)
            .clipShape(Rectangle())
         ColorPicker("Select Color", selection: $myColor, supportsOpacity: true)
      }      
   }
}

#Preview {
   ContentView()
}

输出

在 SwiftUI 中调整颜色选择器的不透明度

颜色选择器的不透明度表示颜色选择器的颜色的不透明度。默认情况下，颜色不透明意味着不透明。colorPicker() 支持一个名为"supportOpacity"的参数，我们可以使用该参数添加和删除不透明度滑块。

默认情况下，此参数的值为 true，这意味着颜色选择器将有一个不透明度滑块，我们可以从中调整颜色的不透明度。如果此参数的值为 false，则颜色选择器将不包含不透明度滑块。

语法

ColorPicker(_titlekKey: LocalizedStringKey, choice: Binding<CGColor>, supportsOpacity:Bool = true)

示例

以下 SwiftUI 程序用于调整不透明度滑块。

import SwiftUI

struct ContentView: View {
   @State private var myColor1: Color = .pink
   @State private var myColor2: Color = .green
   
   var body: some View {
      VStack{
         HStack{
            Circle()
               .fill(myColor1)
               .frame(width: 150, height: 150)
            Circle()
               .fill(myColor2)
               .frame(width: 150, height: 150)
         }
         
         // 带不透明度滑块的颜色选择器
         ColorPicker("Select Color 1", selection: $myColor1, supportsOpacity: true)
         
         // 不带不透明度滑块的颜色选择器
         ColorPicker("Select Color 2", selection: $myColor2, supportsOpacity: false)
         
      }      
   }
}

#Preview {
   ContentView()
}

输出

SwiftUI 中的自定义颜色选择器

在 SwiftUI 中，我们可以创建自定义颜色选择器。因此，我们创建一个符合 View 协议的结构，然后在 body 属性中实现自定义颜色选择器。现在我们在 ContentView 中调用此函数来显示自定义颜色选择器。

import SwiftUI

struct MyColorPicker: View{
   @Binding var mColor: Color
   let colors:[Color] = [.yellow, .red, .green, .brown, .blue]
   
   var body: some View{
      ScrollView(.vertical){
         HStack{
            ForEach(colors, id: \.self){
               c in Rectangle()
                  .fill(c)
                  .frame(width: 50, height: 50)
                  .onTapGesture {
                     mColor = c
               }
            }
         }
      }
   }
}   
struct ContentView: View {
   @State private var myColor: Color = .red
   var body: some View {
      VStack{
         Text("Colors:").font(.title)
         MyColorPicker(mColor: $myColor)
            .padding(30)
         Text("Selected Color:").font(.largeTitle)
         RoundedRectangle(cornerRadius: 5)
            .fill(myColor)
            .frame(width: 200, height: 200)
         
      }
   }
}

#Preview {
   ContentView()
}

输出