SwiftUI from entry to actual combat Chapter 2 Section 15: RadialGradient

Use RadialGradient to draw a radial color gradient background. The radial gradient starts from the origin and spreads outward in an elliptical shape. The gradient consists of two parts: an ellipse and a color group. The ellipse is used to control the position and shape of the gradient, and the color group is used to control the color change of the gradient.

Sample code:

//首先修改此处的文本视图，径向渐变将作为文本视图的背景。
Text("SwifUI Gradient")
    .font(.system(size: 36))//设置文本视图的字体尺寸为36，增加文字的尺寸。
    .padding()//设置文本视图的间距，增加文本视图的内边距。接着设置文本的颜色为白色，以突出作为背景存在的径向渐变。
    .foregroundColor(.white)
    //创建一个径向渐变，设置它的起始颜色为橙色，中间颜色为红色，终点颜色为紫色。渐变中心点为文本视图的中心位置，起点半径为10，终点半径为120。
    .background(RadialGradient(gradient: Gradient(colors: [.orange, .red, .purple]), center: .init(x: 0.5, y: 0.5), startRadius: CGFloat(10), endRadius: CGFloat(120)))

}

View the results of the operation:

Other chapters of "SwiftUI From Entry to Actual Combat":

Chapter 3 SwiftUI Page Layout

Chapter 4 SwiftUI makes beautiful animations

Chapter 5 Interactive Operation of SwiftUI

Chapter 6 SwiftUI Page Jump

Chapter 7 SwiftUI Project Actual Combat

Chapter 8 Wonderful Examples of SwiftUI

Chapter 9 SwiftUI Complete Project