「SwiftUI」Gradient渐变颜色填充效果

淡酒交魂2023-11-29 10:07

iOS 使用渐变色进行填充

这需要使用到Gradient渐变器来实现颜色的渐变变化

常用的有两种：颜色线性变化，径向发散变化

1.线性变化

效果如图：

ps：因颜色有重合部分，所以会生成新的颜色，使用的渐变颜色为：blue，red，yellow

相应代码

使用了LinearGradient渐变器来进行线性发散渐变

swift 复制代码

struct ContentView: View {
    var body: some View {
        LinearGradient(gradient: 
        //需要渐变的颜色，通常两个，此处使用三个表示不是只能使用两种颜色
        Gradient(colors: [.blue,.red, .yellow]),
        //开始渐变的起点
        startPoint: .leading,
        //开始渐变的终点
        endPoint: .trailing)
            .frame(width: 300, height: 100)
    }
}

1.2也可以在Button的背景色上进行使用

效果如图：

相应代码

将线性渐变填充到背景色中，即可完成摁钮的渐变色背景

swift 复制代码

struct ContentView: View {
    var body: some View {
        VStack{
            Text("线性渐变")
                .bold()
                .frame(width: 300, height: 100, alignment: .center)
                .foregroundColor(Color.white)
                .background(LinearGradient(gradient: Gradient(colors: [Color.red,Color.yellow]),
                                           startPoint: .leading,
                                           endPoint: .trailing))
                .clipShape(RoundedRectangle(cornerRadius: 20))
        }
    }
}

2.径向发散变化

效果如图：

相应代码

使用了RadialGradient渐变器来进行径向发散渐变

swift 复制代码

struct ContentView: View {
    var body: some View {
        RadialGradient(gradient:
        				//渐变的颜色，从核心点到四周
                        Gradient(colors: [Color.blue,Color.white.opacity(0)]),
                        //设置发散起点（也就是核心点，通常都为center）
                       center: .center, 
                       //发散起点圆角（半径点）
                       startRadius: 0,
                       //发散结束点半径
                       endRadius: 120)
            .frame(width: 240, height: 240)
    }
}

ps：需要注意的是整个渐变器的frame大小最好设置发散结束半径的两倍左右，否则会出现如下图一样有边框感和分裂感，没有周围完全晕染出来的感觉

错误样式：

Apple开发者文档相应网址：

线性渐变器

developer.apple.com/documentati...

径向渐变器

developer.apple.com/documentati...