- 渐变探索
// 线性渐变
LinearGradient(gradient: Gradient(colors: [.red,.green]), startPoint: UnitPoint.topLeading, endPoint: UnitPoint.bottomTrailing)
.frame( 200, height: 200)
// 角度渐变
AngularGradient(gradient: Gradient(colors: [.red,.green]), center: UnitPoint.center).frame( 200, height: 200)
// 半径渐变
RadialGradient(gradient: Gradient(colors: [.red,.green]), center: UnitPoint.center, startRadius:1, endRadius: 100)
.frame( 200, height: 200) }
LinearGradien:
使用LinearGradien绘制线形颜色渐变的背景。 示例代码:
Text("SwifUI Gradient")
.font(.system(size: 36))
.padding()
.foregroundColor(.white)
.background(LinearGradient(gradient: Gradient(colors: [.orange, .red, .purple]), startPoint: .topLeading, endPoint: .bottomTrailing))
}
AngularGradient:
使用AngularGradient绘制角度颜色渐变的背景。 示例代码:
VStack{
Text("SwifUI Gradient")
.font(.system(size: 36))
.padding()
.foregroundColor(.white)
.background(AngularGradient(gradient: Gradient(colors: [.orange, .red, .purple]), center: UnitPoint(x: 0.5, y: 0.5), angle: Angle.init(degrees: -45)))
Text("SwifUI Gradient")
.font(.system(size: 36))
.padding()
.foregroundColor(.white)
.background(AngularGradient(gradient: Gradient(colors: [.orange, .red, .purple]), center: UnitPoint(x: 0.5, y: 0.5), startAngle: Angle.init(degrees: 0), endAngle: Angle.init(degrees: 0)))
}
RadialGradient:
使用RadialGradient绘制径向颜色渐变的背景。 示例代码:
Text("SwifUI Gradient")
.font(.system(size: 36))
.padding()
.foregroundColor(.white)
.background(RadialGradient(gradient: Gradient(colors: [.orange, .red, .purple]), center: .init(x: 0.5, y: 0.5), startRadius: CGFloat(10), endRadius: CGFloat(120)))
}