iOS SwiftUI 颜色渐变填充效果的实现
SwiftUI为我们提供了各种梯度选项，所有这些选项都可以通过多种方式使用。
Gradient渐变器
Acolorgradientrepresentedasanarrayofcolorstops,eachhavingaparametriclocationvalue.
gradient是一组颜色的合集，每个颜色都忽略位置参数
LinearGradient线性渐变器
线性渐变器拥有沿轴进行渐变函数，我们可以自定义设置颜色空间、起点和终点。
下面我们看看LinearGradient效果
importSwiftUI
structLineView:View{
vargradient:Gradient{
letstops:[Gradient.Stop]=[
.init(color:.red,location:0.5),
.init(color:.yellow,location:0.5)
]
returnGradient(stops:stops)
}
varbody:someView{
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)
}
}
}
importSwiftUI
structLineGradient3Color:View{
varbody:someView{
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)
}
}
}
RadialGradient径向渐变
在径向渐变中，我们必须指定起始半径点，端半径点与中心点，从径向渐变开变.
importSwiftUI
structRadialView:View{
varbody:someView{
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)
}
}
}
AngularGradient
在角渐变中，我们只需要通过中心点。
importSwiftUI
structAngularView:View{
varbody:someView{
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)
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。