前言

更新还在继续... 这是我继续参加 第四期创作者训练营 的文章,继续不断总结自己的学习经历。点击查看活动链接。

今日学习鸡汤: 有时候其实不难，就是没有坚持下来，所以坚持才是最难的！

本章节我们学习 SwiftUI中的 backgroud 以及 overlay 修饰器。

background 和 overlay 是两个非常常用的修饰符。backgroud 修饰器主要作用是在当前视图背景添加视图， 而 overlay 修饰器主要是在当前视图的前景添加叠加视图， 也就是遮罩层。他们两个修饰器都是可以帮助你创建更加复杂的布局效果。

好的，我们开始进入正文吧！

基本概念

虽然这一步很繁琐，但是这样我觉得可以帮助我们更加系统的归纳我们学习的过程；我们进入我们的工程项目点击Xcode顶部导航的 File > New > File from Template 选择 iOS > SwiftUI 模版创建新的SwiftUI文件。

快捷键 Command + N，我们新建文件名为 BackgroundAndOverlayBootcamp.swift。

我们本章将在讲解这两个简单修饰器的概念之后结合简单的案例去进行深化理解。

background

background 修饰符用于给视图添加背景元素。它位于视图的后面，不会影响视图本身的布局，只是视觉上作为背景存在，我们可以添加自定义的颜色。

swift
 代码解读
复制代码
Text("Hello, World!")
    .padding()
    .background(Color.yellow)

在这个例子中，Text 元素会有一个黄色的背景。背景的大小是根据 Text 视图的大小自动适应的。

实现自定义背景视图

你可以将任意的视图作为背景，而不仅仅是颜色。

swift
 代码解读
复制代码
Text("Hello, World!")
    .padding()
    .background(
        RoundedRectangle(cornerRadius: 10)
            .fill(Color.blue)
            .shadow(radius: 5)
    )

这个例子为 Text 添加了一个圆角矩形背景，并且带有阴影效果。

overlay

overlay 修饰符用于在视图的上方叠加其它视图。它位于视图的前面，类似于覆盖在视图的前景上。

swift
 代码解读
复制代码
Circle()
    .fill(Color.green)
    .frame(width: 100, height: 100)
    .overlay(
        Text("Go!")
            .foregroundColor(.white)
            .font(.headline)
    )

在这个例子中，绿色的圆形视图上叠加了一个白色的 Text，显示“Go!”字样。

自定义叠加效果：overlay 可以与其他视图组合，创建复杂的前景效果。

swift
 代码解读
复制代码
Image(systemName: "star.fill")
    .resizable()
    .frame(width: 100, height: 100)
    .overlay(
        Circle()
            .stroke(Color.red, lineWidth: 4)
    )

这个例子在星形图像上叠加了一个红色描边的圆圈。overlay 叠加的视图可以有自己的布局和装饰效果，与下方的主视图独立。

简单案例

当然这两个修饰器可以进行搭配使用，在下面的案例这个我们将实现徽章的效果，首先我们查看下图可以预览效果。

首先我们在当前页面中添加爱心图标，并且设置当前前景色为白色，添加圆形图形背景并且设置圆形颜色为渐变色填充，圆形宽度设置为100， 高度设置为100。

swift
 代码解读
复制代码
Image(systemName: "heart.fill")
    .font(.system(size: 40))
    .foregroundStyle(Color.white)
    .background(
        Circle()
            .fill(
                LinearGradient(colors: [Color( colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1)), Color( colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1))], startPoint: .topLeading, endPoint: .bottomTrailing)
            )
            .frame(width: 100, height: 100)
    )

我们优化下，添加一些阴影效果，

swift
 代码解读
复制代码
 .shadow(color: Color( colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1)) ,radius: 10, x: 5, y: 10)

现在我们添加徽章效果，我们借助.overlay修饰器在背景的圆形上添加层叠效果。

swift
 代码解读
复制代码
Image(systemName: "heart.fill")
    .font(.system(size: 40))
    .foregroundStyle(Color.white)
    .background(
        Circle()
            .fill(
                LinearGradient(
                    colors: [Color( colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1)), Color( colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1))],
                    /* 开始位置 */
                    startPoint: .topLeading,
                    /* 结束位置 */
                    endPoint: .bottomTrailing)
            )
            .frame(width: 100, height: 100)
            .shadow(color: Color( colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1)) ,radius: 10, x: 5, y: 10)
            .overlay(
                Circle()
                    //.foregroundStyle(.blue)
                    // 效果类似
                    .fill(Color.blue)
                    .frame(width: 35, height: 35)
                    .overlay(
                        Text("5")
                            .foregroundStyle(Color.white)
                            .shadow(color: Color( colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1)) ,radius: 10, x: 5, y: 10)
                    )
                , alignment: .bottomTrailing)
    )

好的！

关于backgroud 以及 overlay 的内容就这些，下章再见👋！