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共同创造出的一个例子。代码其实也不难，如果有什么不懂的可以留言。我看到了就会第一时间回复。

感谢观看