一起养成写作习惯！这是我参与「掘金日新计划 · 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按钮的使用】juejin.cn/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渐变色的使用啦！
如果本专栏对你有帮助，不妨点赞、评论、关注～
