SwiftUI 基础控件-Gradient

本篇文章主要讲解LinearGradient，RadialGradient，AngularGradient，EllipticalGradient这4种渐变效果

LinearGradient

LinearGradient称为线性渐变，在SwiftUI中，使用LinearGradient非常简单：

            LinearGradient(
                colors: [.red, .blue, .green],
                startPoint: .top,
                endPoint: .bottom
            )

实现线性渐变需要提供3个参数：

• 颜色数组
• 起点
• 终点

线性渐变效果图.PNG

RadialGradient

RadialGradient称为径向渐变，在SwiftUI中，使用RadialGradient非常简单：

            RadialGradient(
                colors: [.red, .blue, .green],
                center: .center,
                startRadius: 300,
                endRadius: 100
            )

实现线性渐变需要提供4个参数：

• 颜色数组
• 中心点
• 开始半径
• 结束半径

径向渐变效果图.PNG

AngularGradient

AngularGradient称为角渐变，在SwiftUI中，使用AngularGradient非常简单：

            AngularGradient(
                colors: [.red, .blue, .green, .red],
                center: .center,
                startAngle: Angle(degrees: 0),
                endAngle: Angle(degrees: 360)
            )

实现线性渐变需要提供4个参数：

• 颜色数组
• 中心点
• 开始角度
• 结束角度

角渐变效果图.PNG

EllipticalGradient

EllipticalGradient称为椭圆渐变，在SwiftUI中，使用EllipticalGradient非常简单：

            EllipticalGradient(
                colors: [.red, .blue, .green],
                center: .center,
                startRadiusFraction: 0.5,
                endRadiusFraction: 0.5
            )

实现线性渐变需要提供4个参数：

• 颜色数组
• 中心点
• 开始半径分数(0-1)
• 结束半径分数(0-1)

椭圆渐变效果图.PNG