层叠布局容器(ZStack)

ZStack 是 SwiftUI 中一个强大的布局容器，它允许你将视图层叠在一起。想象一下，你正在制作一个生日蛋糕🎂，ZStack 就像蛋糕的底座，你可以在上面一层一层地添加奶油、水果和装饰品。

• ZStack 按照后进先出的原则排列视图。这意味着，最后添加的视图会显示在最上面。
• 你可以使用 ZStack 创建各种各样的视觉效果，例如叠加图像、添加文本阴影或创建复杂的动画。

ZStack 的基本用法

使用 ZStack 非常简单！你只需要将要层叠的视图放在 ZStack 的花括号 {} 中即可。

ZStack {
    Color.red
    Text("Hello, SwiftUI!")
        .foregroundColor(.white)
}

在这个例子中，我们首先添加了一个红色的背景颜色，然后添加了一个白色的文本视图。由于文本视图是在颜色视图之后添加的，因此它会显示在颜色的上面。是不是很简单呢？🎉

调整 ZStack 中视图的位置

默认情况下，ZStack 会将所有视图居中对齐。但是，你可以使用 alignment 参数来改变这种行为。

ZStack(alignment: .topLeading) {
    Color.red
    Text("Hello, SwiftUI!")
        .foregroundColor(.white)
}

在这个例子中，我们将 alignment 设置为 .topLeading，这意味着文本视图会显示在 ZStack 的左上角。你可以尝试不同的对齐方式，例如 .bottomTrailing、.center 等，来找到最适合你的布局。

以下是一些常用的对齐方式：

1. .topLeading：左上角
2. .topTrailing：右上角
3. .bottomLeading：左下角
4. .bottomTrailing：右下角
5. .center：中心

ZStack 的实际应用

ZStack 在实际开发中有很多用途。例如，你可以使用 ZStack 创建一个带有阴影的按钮：

ZStack {
    RoundedRectangle(cornerRadius: 10)
        .fill(Color.gray)
        .shadow(radius: 5)

    Text("Button")
        .foregroundColor(.white)
}

在这个例子中，我们首先创建了一个灰色的圆角矩形，并添加了一个阴影效果。然后，我们在矩形上面添加了一个白色的文本视图。这样，我们就创建了一个带有阴影的按钮。是不是很酷呢？😎

你还可以使用 ZStack 创建一个叠加图像的视图。例如，你可以在一张照片上添加一个水印：

ZStack {
    Image("photo")
        .resizable()
        .scaledToFill()

    Text("Watermark")
        .foregroundColor(.white)
        .font(.largeTitle)
}

在这个例子中，我们首先加载了一张照片，并将其缩放到填充整个视图。然后，我们在照片上面添加了一个白色的水印文本。这样，我们就创建了一个带有水印的图像视图。

希望你能通过这些例子，更好地理解 ZStack 的用法，并在你的 SwiftUI 项目中灵活运用它！💪