SwiftUI极简教程09:Gradient渐变色的使用

一起养成写作习惯！这是我参加「日新方案 4 月更文挑战」的第9天，点击检查活动概况。

前言：不知不觉已经更新到了第9天了，慢慢地，学习的体系就出来了，公然闷在脑子里的东西假如不进行输出，就失去了它的价值。

今日职言：真正的专业，是懂得照料他人，并为对方服务到底。

在本章中，你将学会运用突变色美化视图款式，做出好看的页面。

在上一章节，咱们学会了怎么给按钮加布景色彩，用到了下列代码。

.background(Color(red: 88 / 255, green: 224 / 255, blue: 133 / 255))

这是单个色彩的布景。

假如咱们想要做突变色的布景，咱们需要运用SwiftUI框架内置的突变效果代码。

//左右突变
.background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint: .trailing))

//上下突变
.background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .top, endPoint: .bottom))

简单地来描绘下参数的意思，也便利咱们快速了解。

参数	名称	描绘
LinearGradient()	线性突变	用于定义突变色
gradient	突变色	一般用色彩组，[Color.blue,Color.green]，也便是开端色彩是蓝色，完毕色彩是绿色
startPoint	开端方位	一般运用.leading左面，.trailing右边，.top上边，.bottom下边
endPoint	完毕方位	一般运用.leading左面，.trailing右边，.top上边，.bottom下边

咱们先试试吧。

首先，先创立一个新的项目，命名为SwiftUIGradient。

先创立一个简单的按钮。

假如创立按钮有疑问，能够看下【SwiftUI极简教程08:Button按钮的运用】/post/708403…

struct ContentView: View {
var body: some View {
Button(action: {
// 操作
print("登录成功")
}) {
// 按钮款式
Text("微信登录")
.font(.system(size: 14))
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(Color.green)
.cornerRadius(5)
.padding(.horizontal, 20)
}
}
}

依据Gradient突变色的运用方法，咱们把布景色彩换成蓝绿突变色。

预览后，咱们能够看到模拟器的效果。

struct ContentView: View {
var body: some View {
Button(action: {
// 操作
print("登录成功")
}) {
// 按钮款式
Text("微信登录")
.font(.system(size: 14))
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint: .trailing))
.cornerRadius(5)
.padding(.horizontal, 20)
}
}
}

先来剖析下Gradient突变色的代码，便利咱们理解和运用。

代码格局如下：

.background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint:.trailing))

读一下这段代码的意思。

布景色彩为突变色，突变色彩为蓝色和绿色，突变开端方位为左面，完毕方位为右边。

除了系统提供的色彩外，在[Color.blue,Color.green]色彩组中，咱们也能够运用Assets中导入的色彩。

那咱们尝试下运用下面的突变色。

咱们先在Assets中导入想要的色彩。

咱们导入第一个色彩，命名为“8FD3F4”，运用的色彩也为“8FD3F4”。

同理，咱们再导入第二个色彩，命名为“84FAB0”，运用的色彩也为“84FAB0”。

咱们就得到了两个色彩，并且代码分别为：

Color("8FD3F4")
Color("84FAB0")

接下来，在ContentView文件代码中运用它。

咱们注意到，它是两个色彩左右突变，那么开端色彩为Color(“8FD3F4”)，完毕色彩为Color(“84FAB0”)，开端方位为左面，完毕方位为右边。

咱们在代码中也依照突变色的方向进行设置。

.background(LinearGradient(gradient: Gradient(colors: [Color("8FD3F4"), Color("84FAB0")]), startPoint: .leading, endPoint: .trailing))

祝贺你，咱们完成了突变色按钮的编码！

不过在此发现有个问题，咱们在美化按钮的时分，运用了许多的润饰符代码。

假如按钮许多，并且色彩款式都能够复用的情况下，仿制一大串代码不符合咱们优雅写代码的方针。

还记得【SwiftUI极简教程06：代码优雅复用】的内容吗？SwiftUI写代码的原则是复用的款式都应该抽离出来。

这儿咱们科普一个新的概念，叫做“ButtonStyls”，也便是按钮款式的协议。

它的代码结构是这样的：

struct GradientBackgroundStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
//按钮润饰符
}
}

咱们创立了一个新的结构体，命名为“GradientBackgroundStyle”，它遵从ButtonStyle协议。

然后咱们只需要把款式的代码移动到这个结构体中，再复用回去就能够了。

//款式引用方式
.buttonStyle(GradientBackgroundStyle())

完好代码：

//按钮
struct ContentView: View {
var body: some View {
Button(action: {
// 操作
print("登录成功")
}) {
// 按钮款式
Text("微信登录")
.font(.system(size: 14))
}
.buttonStyle(GradientBackgroundStyle())
}
}
//按钮润饰
struct GradientBackgroundStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
// 按钮润饰符
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(LinearGradient(gradient: Gradient(colors: [Color("8FD3F4"), Color("84FAB0")]), startPoint: .leading, endPoint: .trailing))
.cornerRadius(5)
.padding(.horizontal, 20)
}
}

至此，咱们就掌握了Gradient突变色的运用啦！

假如本专栏对你有协助，不妨点赞、评论、关注～