SwiftUI - 漸變

---

---

漸變是指透過混合兩種或多種顏色建立的視覺效果。或者說，漸變效果是從一種顏色到另一種顏色的平滑顏色過渡。它用於填充形狀，使其顏色平滑過渡，例如從淺到深或從深到淺。

它通常用於背景、按鈕、圖示和其他 UI 元件，以增強元件的視覺外觀。SwiftUI 支援三種類型的漸變：線性、徑向和角度。

漸變使用各種元件，例如將要顯示的顏色陣列、大小和方向以及漸變型別。SwiftUI 提供以下四種應用漸變效果的方法：

• 漸變
• 線性漸變
• 徑向漸變
• 角度漸變
• 橢圓漸變

漸變

.gradient: 修飾符用於將漸變效果應用於指定的元件。

它通常與 background 或 fill 修飾符一起使用。您可以將此修飾符與任何您想要的顏色一起使用。這是應用線性漸變效果的最簡單方法。

語法

以下是語法：

@State private var userData: String = ""

示例

下面的 SwiftUI 程式使用漸變修飾符建立並應用於指定形狀的漸變。

import SwiftUI
struct ContentView: View {   
   var body: some View {
      VStack{
         Rectangle().fill(.pink.gradient).frame(width: 250, height: 200)
         Circle().fill(.mint.gradient)         
      }      
   }
}
#Preview {
   ContentView()
}

輸出

線性漸變

線上性漸變中，顏色的過渡以直線形式進行。SwiftUI 提供了一個內建的 LinearGradient() 函式，我們可以使用它透過混合兩種或多種顏色來建立漸變顏色效果。

此函式使用線性顏色過渡填充區域或元件，從一點到另一點以直線形式進行。過渡可以是水平的、垂直的、對角線的等等。

語法

以下是語法：

LinearGradient(_gradient:AnyGradient, startPoint: UnitPoint, endPoint: UnitPoint)

引數

此方法採用以下引數：

• gradient: 它是一個 Gradient 物件，包含一個 Color 物件陣列。
• startPoint: 它表示漸變的起始點。其值可以是：.top、.topLeading、.topTrailing、.bottom、.bottomLeading、.bottomTrailing、.leading、.trailing、.topleading 等。
• endPoint: 它表示漸變的結束點。其值可以是：.top、.topLeading、.topTrailing、.bottom、.bottomLeading、.bottomTrailing、.leading、.trailing、.topleading 等。

示例

下面的 SwiftUI 程式用於建立線性漸變。

import SwiftUI
struct ContentView: View {   
   var body: some View {
      VStack{
         
         // Two colors
         Rectangle()
            .fill(LinearGradient(colors: [.green, .orange], startPoint: .bottom, endPoint: .leading))
            .frame(width: 170, height: 150)
            .padding(20)
         
         // Multiple colors
         Rectangle()
            .fill(LinearGradient(colors: [.red, .yellow, .green, .indigo], startPoint: .top, endPoint: .bottomTrailing))
            .frame(width: 170, height: 150)
            .padding(20)
         
         // Using gradient
         Rectangle()
            .fill(LinearGradient(gradient: Gradient(colors:[.brown, .mint] ), startPoint: .leading, endPoint: .trailing))
            .frame(width: 170, height: 150)
            .padding(20)
         
         // Setting the coordinates of start and end point
         Rectangle()
            .fill(LinearGradient(colors: [.pink, .blue, .purple], startPoint: UnitPoint(x: 0.4, y: 0.3), endPoint: UnitPoint(x: 0.8, y: 0.7)))
            .frame(width: 170, height: 150)
      }
      
   }
}
#Preview {
   ContentView()
}

輸出

徑向漸變

徑向漸變用於建立兩種或多種顏色的過渡，其中顏色隨著與中心點的距離增加而變化。過渡發生在向外的方向，顏色按比例縮放以適應起始和結束半徑之間。

SwiftUI 提供了一個名為 RadialGradient() 的內建函式。此函式用於填充給定區域的漸變顏色過渡，這意味著它建立一個圓形漸變，其中初始顏色位於中心，最終顏色位於圓的邊緣。

如果給定形狀的區域大小增加，則 SwiftUI 會自動調整漸變。透過調整 RadialGradient() 的 center、startRadius 和 endRadius 引數的值，我們可以建立不同的效果。

語法

以下是語法：

RadialGradient(colors:[Color], center: UnitPoint, startRadius: CGFloat, endRadius: CGFloat)

引數

此方法採用以下引數：

• colors: 它是一個 Color 物件陣列。
• center: 它表示中心點。
• startRadius: 它表示漸變的起始半徑。
• endRadius: 它表示漸變的結束半徑。

示例

下面的 SwiftUI 程式用於應用徑向漸變。

import SwiftUI

struct ContentView: View {   
   var body: some View {
      VStack{         
         // Two colors
         Rectangle()
            .fill(RadialGradient(colors: [.green, .red], center: .center, startRadius: 0, endRadius: 150))
            .frame(width: 170, height: 150)
            .padding(20)
         
         // Multiple colors
         Rectangle()
            .fill(RadialGradient(colors: [.pink, .yellow, .red, .green, .blue, .purple], center: .center, startRadius: 0, endRadius: 150))
            .frame(width: 170, height: 150)
            .padding(20)
         
         // Using gradient
         Rectangle()
            .fill(RadialGradient(gradient: Gradient(colors: [.brown, .orange, .green]), center: .leading, startRadius: 1, endRadius: 150))
            .frame(width: 170, height: 150)
            .padding(20)
         
         Rectangle()
            .fill(RadialGradient(colors: [.pink, .yellow, .red, .green, .blue, .purple], center: .center, startRadius: 0, endRadius: 50))
            .frame(width: 170, height: 150)
      }      
   }
}

#Preview {
   ContentView()
}

輸出

角度漸變

角度漸變用於建立兩種或多種顏色的過渡，其中顏色根據角度而變化。它也稱為圓錐漸變。SwiftUI 提供了一個名為 AngularGradient() 的內建函式。此函式用於填充給定區域的角度顏色過渡。

與徑向漸變一樣，角度漸變也以圓形形式顯示顏色漸變，但此處顏色圍繞中心點輻射。如果給定區域的大小增加，則 SwiftUI 將自動調整漸變中的顏色。

透過調整 AngularGradient() 的 center、startAngle 和 endAngle 引數的值，我們可以建立不同的效果。

語法

以下是語法：

AngularGradient(colors:[Color], center: UnitPoint, angle: Angle)

引數

此方法採用以下引數：

• colors: 它是一個 Color 物件陣列。
• center: 它表示中心點。
• angle: 它表示漸變的起始角度。

示例

下面的 SwiftUI 程式用於應用角度漸變。

import SwiftUI
struct ContentView: View {   
   var body: some View {
      VStack{
         
         // Two colors
         Rectangle()
            .fill(AngularGradient(colors: [.pink, .blue], center: .center))
            .frame(width: 170, height: 150)
            .padding(20)
         
         // Multiple colors
         Rectangle()
            .fill(AngularGradient(colors: [.pink, .yellow, .red, .green, .blue, .purple], center: .center))
            .frame(width: 170, height: 150)
            .padding(20)
         
         Rectangle()
            .fill(AngularGradient(colors: [.red, .green], center: .trailing))
            .frame(width: 170, height: 150)
            .padding(20)
      }      
   }
}

#Preview {
   ContentView()
}

輸出

橢圓漸變

橢圓漸變用於建立兩種或多種顏色的過渡，漸變將以橢圓形狀顯示。我們可以藉助 SwiftUI 支援的 EllipticalGradient() 函式建立橢圓漸變。

此函式從中心到給定區域的邊緣建立橢圓漸變，此處初始顏色將出現在中心，最終顏色將出現在給定形狀的邊緣。

透過更改 center、startRadiusFraction 和 endRadiusFraction 引數的值，我們可以建立橢圓漸變的不同變化。

語法

以下是語法：

EllipticalGradient(colors:[Color], center: UnitPoint, startRadiusFraction: CGFloat, endRadiusFraction:CGFloat)

引數

此方法採用以下引數：

• colors: 它是一個 Color 物件陣列。
• center: 它表示中心點。
• startRadiusFraction: 它表示半徑的起始值。此處的數值介於 0 和 1 之間。0 值對映到中心點，而 1 值對映到圓的直徑。
• endRadiusFraction: 它表示半徑的結束值。此處的數值介於 0 和 1 之間。0 值對映到中心點，而 1 值對映到圓的直徑。

示例

下面的 SwiftUI 程式用於應用橢圓漸變。

import SwiftUI
struct ContentView: View {   
   var body: some View {
      VStack{
         Rectangle().fill(.pink.gradient).frame(width: 250, height: 200)
         Circle().fill(.mint.gradient)         
      }      
   }
}
#Preview {
   ContentView()
}

輸出