这篇文章给大家介绍怎么在iOS中利用SwiftUI实现颜色渐变填充效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
Gradient 渐变器
A color gradient represented as an array of color stops, each having a parametric location value.
gradient是一组颜色的合集，每个颜色都忽略位置参数
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)
}
}关于怎么在iOS中利用SwiftUI实现颜色渐变填充效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
