SwiftUI学习09：Gradient渐变色的使用

介绍

如果我们想要做渐变色背景，我们需要使用SwiftUI框架内置的渐变色代码

• 左右渐变

• 上下渐变

简单描述下参数的意思：

LinerGradient()：线性渐变
gradient：渐变色，通常用颜色数组 [Color.blue,Color.green]，也就是开始颜色蓝色，结束颜色        是绿色
startPoint：开始位置，通常使用.leading .trailing .top .botton 左右上下
endPoint：结束位置，通常使用.leading .trailing .top .botton 左右上下

按钮样式协议

如果按钮很多，切样式都可以复用的情况下，复制一大串代码不符合 优雅代码的目标

这里我们科普一个新的概念，叫做 ButtonStyles，也就是按钮样式协议，继承这个协议，我们就可以实现样式

它的代码结构如下：

struct GradientBackgroundStyle:ButtonStyle{
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
        // Button样式
    }
}

样式使用方式

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

完整代码和效果

struct ContentView: View {
    var body: some View {
        
        Button {
            print("登录成功")
        } label: {
            Text("微信登录")
                .font(.system(size: 14))
        }
        // 样式引用方式
        .buttonStyle(GradientBackgroundStyle())
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

// ButtonStyle
struct GradientBackgroundStyle:ButtonStyle{
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            // 按钮修饰符
            .frame(minWidth: 0,maxWidth: .infinity,minHeight: 0,maxHeight: 50)
            .foregroundColor(.white)
            .background(LinearGradient(gradient: Gradient(colors: [Color("8FD3F4"),Color("84FAB0")]), startPoint: .leading, endPoint: .trailing))
            .cornerRadius(5)
            .padding(.horizontal,20)
    }
}