iOS SwiftUI 颜色渐变填充效果的实现
程序员文章站
2022-11-20 23:31:07
swiftui 为我们提供了各种梯度选项,所有这些选项都可以通过多种方式使用。gradient 渐变器a color gradient represented as an array of color...
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) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。