iOS SwiftUI 颜色渐变填充效果的实现

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)
     }
   }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。