在本章中，你将学会使用渐变色美化视图样式，做出好看的页面。
在上一章节，我们学会了如何给按钮加背景颜色，用到了下列代码。
.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渐变色的使用啦！
