iOS SwiftUI 颜色渐变填充效果的实现
时间：2021-03-19 09:46:05 | 栏目：iOS代码 | 点击：次
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)
}
}