Backgrounds and Overlays in SwiftUI

在SwiftUI中，Overlays（覆盖层）是一种用于在视图层次结构中放置其他视图的技术。它允许你在现有视图的上方或下方添加额外的视图，以实现一些特定的效果或交互。

SwiftUI中常用的一种覆盖层是overlay修饰符。overlay修饰符允许你在一个视图上添加一个或多个额外的视图，这些额外的视图会在原始视图之上进行绘制。这在需要在视图上添加标签、按钮、图标或其他内容时非常有用

这是一个简单的例子，如下

ZStack { // 使用 ZStack 创建视图层次结构
            Color.blue // 原始视图
                .frame(width: 200, height: 200)
            
            Text("Overlay") // 覆盖层上的文本视图
                .foregroundColor(.white)
                .font(.title)
                .padding()
                .background(Color.black)
                .opacity(0.7)
                .cornerRadius(10)
                .overlay(
                    Image(systemName: "star.fill") // 覆盖层上的图标视图
                        .foregroundColor(.yellow)
                        .font(.largeTitle)
                        .padding(20)
                )
        }

在上面的示例中，我们在一个蓝色的方形视图上添加了一个带有文本和图标的覆盖层。文本视图在方形视图上方，图标视图在文本视图上方。

另一个结合Backgrounds和overlays的例子

struct BackgroundAndOverlayerSample: View {
    var body: some View {
        Rectangle()
            .fill(Color.orange)
            .frame(width: 200, height: 200)
            .overlay(alignment:.center, content: {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 100)
            })
            .background(alignment: .center, content: {
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: 300, height: 300)
            })
    }
}

利用Overlay和background叠加，创造出不一样的视图。上面例子你可以改变对齐(alignment)方式，来到达不一样的效果。

这里仅仅把对齐方式由原来的 center 改成了 topleading

struct BackgroundAndOverlayerSample: View {
    var body: some View {
        Rectangle()
            .fill(Color.orange)
            .frame(width: 200, height: 200)
            .overlay(alignment: .topLeading, content: {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 100)
            })
            .background(alignment: .topLeading, content: {
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: 300, height: 300)
            })
    }
}

最后一个例子，Backgrounds和overlays结合使用

上面是效果，下面是具体的代码

struct BackgroundAndOverlayerSample: View {
    var body: some View {
        let color = Color(#colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1))
        Image(systemName: "heart.fill")
            .font(.system(size: 45))
            .foregroundColor(Color.white)
            .background {
                Circle()
                    .fill(
                        LinearGradient(
                            gradient: Gradient(
                                colors: [Color.green, Color.blue]
                            ),
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .frame(width: 100, height: 100)
                    .shadow(color: color, radius: 10, x: 0, y: 6)
                    .overlay(alignment: .bottomTrailing, content: {
                        Circle()
                            .fill(Color.red)
                            .frame(width: 30, height: 30)
                            .overlay {
                                Text("8")
                                    .font(.headline)
                                    .foregroundColor(.white)
                            }
                            .shadow(color: Color.blue, radius: 10, x: 3, y: 3)
                    })
            }
    }
}

这里是结合了 gradient，frame，background，overlays共同创造出的一个例子。代码其实也不难，如果有什么不懂的可以留言。我看到了就会第一时间回复。

感谢观看