播面 HStack、VStack 和 ZStack 的区别？
在 SwiftUI 中，HStack、VStack 和 ZStack 是最基础也是最重要的三个布局容器。它们的区别主要在于子视图（Subviews）的排列方向。
简单来说：
- HStack: 水平排列 (Horizontal)
- VStack: 垂直排列 (Vertical)
- ZStack: 前后层叠排列 (Z-axis / Depth)
1. VStack (Vertical Stack) - 垂直堆叠
- 方向：从上到下 (Top to Bottom)。
- 用途：用于构建列表、表单或任何需要上下排列的元素。
- 对齐方式：控制子视图在水平方向上的对齐（如左对齐、居中、右对齐）。
代码示例：
plaintext
VStack(alignment: .leading, spacing: 10) {
Text("标题")
Text("副标题")
Button("点击") { }
}
// 结果：三个元素垂直排成一列2. HStack (Horizontal Stack) - 水平堆叠
- 方向：从左到右 (Left to Right)。
- 用途：用于一行内显示多个元素，例如图标加文字、导航栏按钮等。
- 对齐方式：控制子视图在垂直方向上的对齐（如顶部对齐、居中、底部对齐）。
代码示例：
plaintext
HStack(alignment: .center, spacing: 20) {
Image(systemName: "star")
Text("收藏")
}
// 结果：图标在左，文字在右，排成一行3. ZStack (Z-axis Stack) - 层叠堆叠
- 方向：从后到前 (Back to Front)。就像 Photoshop 的图层，第一个视图在最底层，最后一个视图在最顶层。
- 用途：用于背景图片、在图片上覆盖文字、加载指示器覆盖在内容上等。
- 对齐方式：控制所有图层在容器内的位置（如都在中心、都在右上角）。
- 注意：ZStack 没有
spacing参数，因为元素是重叠的。
代码示例：
plaintext
ZStack(alignment: .bottom) {
Image("backgroundImage") // 底层
Text("图片说明") // 顶层，覆盖在图片上
.foregroundStyle(.white)
}
// 结果：文字浮在图片上方总结对比表
| 特性 | VStack | HStack | ZStack |
|---|---|---|---|
| 全称 | Vertical Stack | Horizontal Stack | Z-axis Stack |
| 排列方向 | 垂直 (Y轴) | 水平 (X轴) | 层叠 (Z轴/深度) |
| 顺序 | 从上往下 | 从左往右 | 从后往前 (覆盖) |
| 主要对齐轴 | 水平对齐 (Horizontal) | 垂直对齐 (Vertical) | 双向对齐 (Both) |
| Spacing 参数 | 有 (控制行间距) | 有 (控制列间距) | 无 (元素重叠) |
| 生活类比 | 一摞书 | 书架上并排的书 | 三明治 (一层压一层) |
组合使用 (实战场景)
在实际开发中，通常会将它们嵌套使用。
例子：一个带有背景卡片的图文列表项
plaintext
ZStack {
// 1. 最底层：背景色
Color.gray.opacity(0.2)
.cornerRadius(10)
// 2. 上层：内容布局
HStack(spacing: 15) {
Image(systemName: "person.circle") // 左侧头像
.font(.largeTitle)
VStack(alignment: .leading) { // 右侧文本区域
Text("用户名")
.font(.headline)
Text("这是用户的个人简介...")
.font(.subheadline)
}
Spacer() // 撑开空间
}
.padding()
}
.frame(height: 80)逻辑解析：
- 用
ZStack放背景颜色。 - 在背景之上，用
HStack让头像和文本区域左右并排。 - 在文本区域内，用
VStack让用户名和简介上下排列。