SwiftUI（三）- 渐变、实心形状和视图背景

引言

在现代的应用的UI设计中，渐变和形状背景为界面带来了丰富的层次与视觉效果，而SwiftUI提供了一系列简单且强大的API，可以轻松实现这些效果。在这篇文章中，我们将介绍SwiftUI中的渐变、实心形状和视图背景的基础用法，帮助你在项目中创建更具有吸引力的界面设计。无论是为按钮添加渐变，还是使用自定义形状构构建独特的背景，这些技巧的应用都能提升应用的视觉体验。接下来我们就开始一起探索这些SwiftUI的基本组件吧。

渲染渐变

在UIKit中并没有提供渐变的组件，我们通过使用渐变图层CAGradientLayer来构建渐变效果，这需要很多代码，而SwiftUI中就相对容易很多，它为我们提供了多种渐变选项。例如我们可以使用红色到绿色的线性渐变来渲染文本视图，如下所示：

        Text("Hello world!")
            .padding()
            .foregroundStyle(.white)
            .background(LinearGradient(gradient: Gradient(colors: [.red, .green]), startPoint: .leading, endPoint: .trailing))

颜色是一个数组，我们可以设置任意数量的颜色，默认情况下，SwiftUI会将它们均匀分配。比如我们设置从红色到绿色再到蓝色：

        Text("Hello world!")
            .padding()
            .foregroundStyle(.white)
            .background(LinearGradient(gradient: Gradient(colors: [.red, .green,.blue]), startPoint: .leading, endPoint: .trailing))

还可以进行垂直渐变，将.leading，.trailing改为.top和.bottom，以及.topLeading，.topTrailing等值进行倾斜的渐变：

        Text("Hello world!")
            .padding()
            .foregroundStyle(.white)
            .background(LinearGradient(gradient: Gradient(colors: [.red, .green,.blue]), startPoint: .top, endPoint: .bottom))

创建几何形状

在UIKit中通常我们只能创建长方形和正方形，而且其它的形状我们需要借助CALayer和变换来实现，SwiftUI想要使用简单的几何形状，我们同样也可以直接创建它们。

例如我们创建一个100*100的红色正方形，代码如下：

        Rectangle()
            .fill(Color.red)
            .frame(width: 100, height: 100)

但是创建圆形，相对于UIKit，SwiftUI直接为我们提供了圆形形状：

        Circle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)

为视图创建背景

在UIKit中并没有直接为视图创建背景的方法，通常我们只可以为视图设置背景颜色，但是可以通过视图的层级结构来为视图添加背景视图。而在SwiftUI中设置背景图像和设置背景的方法都是使用background()修饰符，它除了颜色之外还可以指定背景图像，例如，创建一个大字体的文本视图，然后在后面放置一个300*300的logo图片：

        Text("hello, world!")
            .font(.largeTitle)
            .background(
                Image("swift")
                    .resizable()
                    .frame(width: 300, height: 300))

事实上这一点UIKit通过设置CALayer的寄宿图也可以实现视图的图像背景，但在SwiftUI中视图的背景并不一定是图像，而是可以使用任何类型的视图做背景。比如我们在文字后面放置一个300*300的红色圆形：

        Text("hello, world!")
            .font(.largeTitle)
            .background(Circle()
                .fill(Color.red)
                .frame(width: 200, height: 200))

再夸张一些我们甚至可以使用文本来作为文本的背景：

        Text("hello, world!")
            .font(.largeTitle)
            .background(Text("hello, world!")
                .font(.title)
                .foregroundStyle(.red))

当然我们通常不会这样设置。

结语

通过这篇文章，我们了解了如何在 SwiftUI 中应用渐变、实心形状和背景视图，为界面设计增添更多可能性。这些基础组件不仅为 UI 带来了视觉层次感，也为开发者提供了更灵活的设计选择。掌握这些用法后，你可以根据项目需求灵活地运用它们，为应用界面注入独特的风格和个性化效果。希望这些基础技巧能为你的 SwiftUI 开发带来启发，创造出更具吸引力和表现力的用户界面。