SwiftUI - 顏色

顏色在設計使用者介面中扮演著重要的角色。它增強了檢視及其元件的視覺外觀。SwiftUI 提供了各種型別的預定義、系統和自定義顏色，包括淺色和深色陰影。

我們還可以使用不透明度、漸變等各種修飾符來修改它們。我們還可以從其他顏色（例如 UIKit、AppKit Core Graphics 等）獲取顏色。在本章中，我們將學習如何在檢視或元件中使用顏色，如何建立自定義顏色等等。

SwiftUI 中的 Color 結構體

SwiftUI 中的 Color 結構體用於建立各種顏色例項。這些顏色例項可以使用 RGB、HSL、灰度元件值或標準顏色屬性進行修改。

顏色結構體的例項可以用作 background()、fill()、foregroundStyle() 等的引數，以更改給定形狀或背景的顏色。我們還可以使用 opacity 引數調整所有顏色的不透明度。此引數的值可以在 0 到 1 之間變化。

語法

以下是語法：

let color = Color()

示例

下面的 SwiftUI 程式在給定的形狀中新增顏色。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Rectangle()
            .fill(Color.green)
            .frame(width: 150, height: 200)
         Circle()
            .fill(.red)
            .frame(width: 150, height: 200)
      }
   }
}

#Preview {
   ContentView()
}

輸出

SwiftUI 中的系統顏色

SwiftUI 支援各種型別的預設系統顏色。使用這些顏色，我們可以更改 macOS、tvOS、watchOS 等的使用者介面的外觀。

這些顏色通常在 Color 結構體中定義，它們在淺色和深色環境中都可用。這些顏色是動態的，它們可以根據標準 UI 元件的要求自動調整為淺色或深色環境。

SwiftUI 支援以下型別的系統顏色：

Color.red
Color.blue
Color.green
Color.yellow
Color.orange
Color.purple
Color.pink
Color.primary
Color.accentColor
Color.secondary
Color.black
Color.indigo
Color.teal
Color.cyan
Color.mint
Color.white
Color.gray
Color.clear
Color(.systemRed)
Color(.systemBlue)
Color(.systemGreen)
Color(.systemYellow)
Color(.systemOrange)
Color(.systemPink)
Color(.systemPurple)
Color(.systemTeal)
Color(.systemGray)

語法

以下是語法：

.fill(Color.blue)

示例

下面的 SwiftUI 程式用於將系統顏色應用於給定的形狀。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Capsule()
            .fill(.yellow)
            .frame(width: 150, height: 200)
            .overlay(Text("SwiftUI"))
         Capsule()
            .fill(.secondary)
            .frame(width: 140, height: 200)
            .overlay(Text("SwiftUI").foregroundStyle(.white))
      }
   }
}
#Preview {
   ContentView()
}

輸出

SwiftUI 中的自定義顏色

除了預定義顏色外，SwiftUI 還允許我們使用以下任何方法建立自己的顏色：

自定義顏色
顏色集

自定義顏色

在 SwiftUI 中，我們可以使用各種元件（如 RGB（紅、綠、藍）、HSL（色相、飽和度、亮度）或灰度）來建立自己的顏色。

RGB：它用於透過指定建立該顏色所使用的紅色、綠色和藍色的量來建立顏色。這裡這些值可以在 0 到 1 之間變化。這裡 0 表示強度為零的顏色，1 表示強度為滿的顏色。
HSB：它用於透過指定建立該顏色所使用的色相、飽和度和亮度的量來建立顏色。這裡這些引數的值應該在 0 到 1 之間。
灰度：灰度顏色是指僅由灰色陰影組成的顏色，這意味著它們沒有任何色相或飽和度，並且從黑色到白色變化。我們可以透過調整 0 到 1 之間的白色引數值來建立灰度顏色。

語法

以下是 RGB、HSL 和灰度的語法：

let color1 = Color(red:Double, green:Double, blue:Double)
let color2 = Color(hue:Double, saturation:Double, brightness:Double)
let color3 = Color(white:Double)

示例

下面的 SwiftUI 程式用於使用 RGB、HSB 和灰度建立自定義顏色。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Capsule()
            // Creating custom color with HSB
            .fill(Color(hue: 0.2, saturation: 0.1, brightness: 0.3, opacity: 0.9))
            .frame(width: 150, height: 200)
         Capsule()
            // Creating custom color with RGB
            .fill(Color(red:0.2, green:0.1, blue:0.9))
            .frame(width: 140, height: 200)
         Capsule()
            // Creating custom color with grayscale
            .fill(Color(white: 0.5))
            .frame(width: 140, height: 200)         
      }
   }
}
#Preview {
   ContentView()
}

輸出

顏色集

我們還可以透過在 Assets.xcassets 中新增顏色集來建立自定義顏色。透過在 Assets.xcassets 中新增顏色，我們可以在該專案中的所有檢視中使用該顏色。

在這裡，我們還可以使用 RGB 值、十六進位制程式碼或系統顏色來指定該顏色的淺色和深色模式。

要在資源中新增顏色，請按照以下步驟操作：

步驟 1：開啟 Assets。

步驟 2：右鍵單擊螢幕並選擇“新建顏色集”。

步驟 3：設定顏色集的名稱，然後透過設定 RGB 和不透明度值來新增新顏色。

步驟 4：現在您就可以在專案中使用此顏色了。

Color("ColorName")

示例

下面的 SwiftUI 程式用於使用顏色集建立自定義顏色。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Capsule().fill(Color("MyColor")).frame(width: 150, height: 200)
      }
   }
}

#Preview {
   ContentView()
}

輸出

在 SwiftUI 中使用修飾符設定顏色

在 SwiftUI 中，我們可以使用各種修飾符與顏色一起更改指定元件、文字或檢視的顏色。以下是使用顏色的修飾符：

.backgound(.blue)：此修飾符使用顏色更改檢視的背景顏色。
.foregroundStyle(.pink)：它使用顏色更改前景元素的顏色。
.shadow(color:.pink)：它用於更改陰影的顏色。
.fill(.red)：它用於使用給定顏色填充形狀。
.stroke(Color.yellow)：它用於更改給定形狀的邊界顏色。

列印頁面