SwiftUI 為我們提供了各種梯度選項，所有這些選項都可以通過多種方式使用。

Gradient 漸變器

A color gradient represented as an array of color stops,each having a parametric location value.

gradient是一組顏色的合集，每個顏色都忽略位置引數

LinearGradient 線性漸變器

線性漸變器擁有沿軸進行漸變函式，我們可以自定義設定顏色空間、起點和終點。

下面我們看看LinearGradient效果

import SwiftUI

struct LineView: View {
   var gradient: Gradient {
      let stops: [Gradient.Stop] = [
        .init(color: .red,location: 0.5),.init(color: .yellow,location: 0.5)
      ]
      return Gradient(stops: stops)
    }
    
    var body: some View {
    
        ZStack {
          LinearGradient(gradient: gradient,startPoint: .top,endPoint: .trailing)
            .edgesIgnoringSafeArea(.all)
          
          Image("1")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .clipShape(Circle())
            .overlay(Circle()
              .stroke(lineWidth: 8)
              .foregroundColor(.white))
            .frame(width: 250)
          
        Text("洛神賦圖")
              .padding()
              .foregroundColor(.white)
          .cornerRadius(8)
              .background(LinearGradient(gradient: Gradient(colors: [.white,.black]),endPoint: .bottom))
          .offset(y:-280)
        }

    }
}

import SwiftUI

struct LineGradient3Color: View {
  
  var body: some View {
    ZStack {
      LinearGradient(gradient:
        Gradient(
          colors: [.blue,.white,.pink]),startPoint: .topLeading,endPoint: .bottomTrailing)
        .edgesIgnoringSafeArea(.all)
      
      Image("2")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .clipShape(Circle())
        .overlay(Circle()
          .stroke(lineWidth: 8)
          .foregroundColor(.white))
        .frame(width: 250)
      
      Text("清明上河圖")
        .padding()
        .foregroundColor(.white)
        .cornerRadius(8)
        .background(LinearGradient(gradient: Gradient(
          colors: [.yellow,.red]),endPoint: .bottomTrailing))
        .offset(y:-180)
    }
  }
}

Radial Gradient 徑向漸變

在徑向漸變中，我們必須指定起始半徑點，端半徑點與中心點，從徑向漸變開變.

import SwiftUI

struct RadialView: View {
   var body: some View {
     ZStack {
       RadialGradient(gradient: Gradient(
        colors: [.blue,center: .center,startRadius: 2,endRadius: 650)
         .edgesIgnoringSafeArea(.all)
       
       Image("3")
         .resizable()
         .aspectRatio(contentMode: .fit)
         .clipShape(Circle())
         .overlay(Circle()
           .stroke(lineWidth: 8)
           .foregroundColor(.white))
         .frame(width: 250)
       
       Text("富春山居圖")
         .padding()
         .foregroundColor(.white)
         .cornerRadius(8)
         .background(
          RadialGradient(gradient: Gradient(
           colors: [.yellow,endRadius: 60))
         .offset(y:-180)
     }
   }
}

Angular Gradient

在角漸變中，我們只需要通過中心點。

import SwiftUI

struct AngularView: View {
    var body: some View {
     ZStack {
      AngularGradient(gradient: Gradient(
        colors: [.green,.blue,.black,.green,.green]),center: .center)
         .edgesIgnoringSafeArea(.all)
       
       Image("4")
         .resizable()
         .aspectRatio(contentMode: .fit)
         .clipShape(Circle())
         .overlay(Circle()
           .stroke(lineWidth: 8)
           .foregroundColor(.white))
         .frame(width: 250)
       
       Text("漢宮春曉圖")
         .padding()
         .foregroundColor(.white)
         .cornerRadius(8)
         .background(
          RadialGradient(gradient: Gradient(
           colors: [.yellow,endRadius: 60))
         .offset(y:-180)
     }
   }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。