VStack、HStack 与 ZStack 基础
使用间距和对齐方式，沿垂直、水平及深度方向排列视图。
VStack、HStack 与 ZStack 基础 是 CoddyKit 上的免费 Swift Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Swift Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Swift Academy 课程共包含 4 节课。
欢迎
`VStack`、`HStack` 和 `ZStack` 是 SwiftUI 中三种基本的布局容器。理解它们对于构建任何用户界面都至关重要。
VStack——垂直布局
```swift
VStack(alignment: .leading, spacing: 8) {
Text("Title").font(.title)
Text("Subtitle").foregroundColor(.secondary)
Button("Action") {}
}
```
HStack——水平布局
```swift
HStack(spacing: 16) {
Image(systemName: "star")
Text("Favourite")
Spacer()
Text("4.9")
}
```
ZStack——深度布局
```swift
ZStack(alignment: .bottomTrailing) {
Image("background")
Text("Overlay")
.padding()
.background(Color.black.opacity(0.5))
}
```
对齐选项
VStack 对齐方式：`.leading`、`.center`、`.trailing`
HStack 对齐方式：`.top`、`.center`、`.bottom`、`.firstTextBaseline`
ZStack 对齐方式：可组合水平和垂直方向的任意 `Alignment`
间距参数
```swift
VStack(spacing: 0) { // no space between views
Divider()
Text("A")
Divider()
Text("B")
}
```
嵌套堆栈
```swift
VStack {
HStack { Image("icon"); Text("Name") }
Text("Description")
}
```
堆栈可以进行任意层级的嵌套，从而实现各种布局。
Spacer
```swift
HStack {
Text("Left")
Spacer() // pushes views to edges
Text("Right")
}
```
Divider
```swift
VStack {
Text("Above")
Divider() // horizontal line
Text("Below")
}
```
性能：Group 与 Stack
当子 View 超过 10 个时，请将它们放入 `Group` 中，或改用 `LazyVStack`，以避免 View 树的限制：
```swift
ScrollView {
LazyVStack {
ForEach(items) { Text($0.name) }
}
}
```
快速检查
哪个堆栈会沿深度轴（从前到后）放置 View？
回顾
主要要点：
• `VStack`——垂直；`HStack`——水平；`ZStack`——深度
• 使用 `alignment:` 和 `spacing:` 参数
• `Spacer()` 会将相邻 View 推向边缘
• 嵌套堆栈来实现复杂布局
• 对于较大的列表，使用 `LazyVStack`/`LazyHStack`
接下来学习：LazyVGrid 和 LazyHGrid。
常见问题解答
「VStack、HStack 与 ZStack 基础」课时是免费的吗？
是的 — 「VStack、HStack 与 ZStack 基础」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Swift Academy 课程的其余内容，请升级到 CoddyKit PRO。 Swift Academy 课程共包含 4 节课。
「VStack、HStack 与 ZStack 基础」这节课中我会学到什么？
使用间距和对齐方式，沿垂直、水平及深度方向排列视图。 你通过在浏览器中直接运行的动手代码来练习 Swift Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Swift Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Swift Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「VStack、HStack 与 ZStack 基础」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Swift Academy 课中编写并运行代码吗？
能。每节 Swift Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- VStack、HStack 与 ZStack 基础
- LazyVGrid 与 LazyHGrid
- Spacer、内边距与 Frame 修饰器
- 使用 GeometryReader 构建自适应布局