SwiftUI - 顏色選擇器

SwiftUI - 顏色選擇器

在 SwiftUI 中，ColorPicker 是一個內建的 UI 元件，它允許使用者從調色盤中選擇顏色。它是一個簡單的顏色選擇介面。它始終嵌入在檢視中。

我們可以在各種容器中包含顏色選擇器，例如 VStack、HStack、List 等。ColorPicker 元件顯示當前選定的顏色以及一個大型系統顏色調色盤，使用者可以從中選擇新的顏色。

語法

以下是語法：

ColorPicker 需要一個儲存所選顏色的狀態變數。這裡當前選定的顏色是紅色。

@State var myColor = Color.red
ColorPicker(_titlekKey: LocalizedStringKey, selection: 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, selection: 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)
         }
         
         // Color picker with opacity slider
         ColorPicker("Select Color 1", selection: $myColor1, supportsOpacity: true)
         
         // Color picker without opacity slider
         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()
}

輸出