SwiftUI - 調整顏色

---

---

調整顏色是 SwiftUI 開發人員用來增強指定檢視（如影像、文字和形狀）的最基本效果，透過調整其顏色來實現。

SwiftUI 支援以下修飾符來增強指定檢視中顏色的外觀。這些修飾符可以很好地與影像、文字、形狀、UIComponents 等檢視一起使用。

• .colorMultiply
• .saturation
• .brightness
• .contrast
• .hueRotation

SwiftUI 中的“.colorMultiply”修飾符

.colorMultiply(_:) 修飾符用於透過將指定顏色與當前檢視的每個畫素相乘，對檢視或影像執行混合效果。

此處，乘法是根據通道基礎進行的：紅色、綠色、藍色和 Alpha。

語法

以下是語法 -

func colorMultiply(_color:Color) -> some View

此處，此修飾符僅接受一個引數，即我們希望與當前檢視相乘的顏色。

示例

以下 SwiftUI 程式用於對給定影像應用顏色相乘效果。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {
         Text("Original Image:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)

         Text("Color Multiply")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)
            .colorMultiply(.pink)
      }
   }
}
#Preview {
   ContentView()
}

輸出

SwiftUI 中的“.saturation”修飾符

.saturation 修飾符用於調整指定檢視（如影像、文字、形狀等）中顏色的強度。飽和度的增加使顏色更亮，而飽和度的減少使顏色變為靜音或灰度。

語法

以下是語法 -

func saturation(_amount:Double) -> some View

此處，此修飾符僅接受一個引數，即我們希望在指定檢視中使用的飽和度量。

示例

以下 SwiftUI 程式用於對給定影像應用飽和度效果。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {
         Text("Original Image:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)

         Text("Saturation:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)
            .saturation(6.0)
      }
   }
}

#Preview {
   ContentView()
}

輸出

SwiftUI 中的“.contrast”修飾符

.contrast 修飾符用於設定當前檢視的對比度。它通常用於在指定檢視中存在的顏色的亮區和暗區之間建立差異。

語法

以下是語法 -

func contrast(_amount:Double) -> some View

此處，此修飾符僅接受一個引數：我們希望在指定檢視中使用的對比度量。如果值為負數，則會反轉顏色並應用對比度。

示例

以下 SwiftUI 程式用於對給定影像應用對比度效果。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {
         Text("Original Image:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)

         Text("Contrast:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)
            .contrast(5.0)
      }
   }
}

#Preview {
   ContentView()
}

輸出

SwiftUI 中的“.brightness”修飾符

.brightness 修飾符用於設定當前檢視的亮度。使用亮度效果，我們可以透過新增或減去光線使指定檢視更亮或更暗。

語法

以下是語法 -

func brightness(_amount:Double) -> some View

此處，此修飾符僅接受一個引數，即我們希望在指定檢視中使用的亮度量。此引數的值在 0（無效果）和 1（全白亮度）之間變化。

示例

以下 SwiftUI 程式用於對給定影像應用亮度效果。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {
         Text("Original Image:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)

         Text("Brightness:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)
            .brightness(0.8)
      }
   }
}

#Preview {
   ContentView()
}

輸出

SwiftUI 中的“.hueRotation”修飾符

.hueRotation 修飾符用於將色相旋轉效果設定為給定檢視。它根據給定的角度移動檢視記憶體在的所有顏色。

語法

以下是語法 -

func hueRotation(_angle:Angle) -> some View

此處，此修飾符僅接受一個引數，即將應用於指定檢視的色相旋轉角度。

我們希望在指定檢視中使用的亮度量。此引數的值在 0（無效果）和 1（全白亮度）之間變化。

示例

以下 SwiftUI 程式用於對給定影像應用色相旋轉效果。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {
         Text("Original Image:").font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)
         Text("Hue Rotation:").font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)
            .hueRotation(Angle(degrees: 75))
      }
   }
}
#Preview {
   ContentView()
}

輸出