iOS SwiftUI 顏色漸變填充效果

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]), startPoint: .top, 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]),
                                           startPoint: .topLeading,
                    endPoint: .bottomTrailing))
                .offset(y:-180)
        }
    }
}

---

Radial Gradient 徑向漸變

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

import SwiftUI

struct RadialView: View {
     var body: some View {
          ZStack {
             RadialGradient(gradient: Gradient(
                colors: [.blue, .black]),
                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, .red]),
                                   center: .center,
                                      startRadius: 2,
                             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, .blue, .black, .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, .red]),
                                  center: .center,
                                     startRadius: 2,
                            endRadius: 60))
                 .offset(y:-180)
         }
     }

}

若是須要項目完整源碼，能夠加我QQ。

QQ:3365059189
SwiftUI技術交流QQ羣:518696470

• 請關注個人專欄icloudend, SwiftUI教程與源碼

https://www.jianshu.com/c/7b3...