SwiftUI从入门到实战第2章第15节：RadialGradient

最新推荐文章于 2026-06-21 17:59:13 发布

原创最新推荐文章于 2026-06-21 17:59:13 发布 · 927 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文为互动教程网原创文章，欢迎转载但请注明来源。

标签

#swiftui #swiftui教程 #swiftui课程

收录于

iOS移动开发专栏收录该内容

469 篇文章

订阅专栏

本文介绍如何使用SwiftUI的RadialGradient来创建径向颜色渐变的背景。通过设置椭圆形状、颜色组及渐变中心点，实现从橙色到紫色的渐变效果，增强视觉体验。

使用RadialGradient绘制径向颜色渐变的背景。径向渐变从原点开始，以椭圆形状向外扩散，渐变由两部分组成：椭圆和颜色组。椭圆用来控制渐变的位置和形状，而颜色组用来控制渐变的颜色变化。

示例代码：

//首先修改此处的文本视图，径向渐变将作为文本视图的背景。
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)))

}

查看运行结果：