SwiftUI极简教程09:Gradient渐变色的使用-阿里云开发者社区

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

2022-06-06 775

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

在上一章节，我们学会了如何给按钮加背景颜色，用到了下列代码。

.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)
    }
}