SwiftUI 03-布局基础：Stack 布局系统

SwiftUI 提供了功能强大的 栈式布局系统，它以 VStack（垂直）、HStack（水平）和 ZStack（重叠）为核心，通过组合和嵌套构建出各种页面结构。本章将逐步讲解它们的使用方式、布局技巧与实践建议。

一、VStack：垂直布局容器

VStack 会将其内部子视图从上到下依次排列。

VStack {
    Text("上")
    Text("中")
    Text("下")
}

可选参数说明

VStack(alignment: .leading, spacing: 16) {
    Text("标题").font(.title)
    Text("副标题").foregroundColor(.gray)
}

• alignment：对齐方式（默认 .center），可设置 .leading、.trailing 等。
• spacing：子视图之间的垂直间距。

二、HStack：水平布局容器

HStack 会从左到右排列子视图。

HStack(spacing: 12) {
    Image(systemName: "heart.fill")
    Text("喜欢")
    Image(systemName: "star.fill")
}

使用 Spacer 创建对齐结构

HStack {
    Text("左侧")
    Spacer()
    Text("右侧")
}

• Spacer() 会占用所有剩余空间。
• 在 HStack 中，它可以将两端视图“推开”。

三、ZStack：重叠布局容器

ZStack 允许将多个视图堆叠在一起，默认中心对齐。

ZStack {
    Color.blue
    Text("重叠文本")
        .foregroundColor(.white)
        .font(.title)
}
.frame(width: 200, height: 100)
.cornerRadius(12)

后添加的视图会覆盖前面的。适用于背景图、浮层、叠加按钮等场景。

四、使用 Spacer 实现弹性空白

Spacer 是一种“弹性填充”，会尽可能占据可用空间。

VStack {
    Text("顶部")
    Spacer()
    Text("底部")
}
.frame(height: 300)

可以用于内容对齐、自动布局、居中/底部对齐等。

五、使用 Divider 分隔内容区域

Divider() 是一条细线，可用于在布局中分隔视图组：

VStack {
    Text("上方内容")
    Divider()
    Text("下方内容")
}

通常配合 VStack、HStack 使用，使内容结构更加清晰。

六、组合使用 Stack 构建复杂结构

通过嵌套 VStack、HStack 和 ZStack，可以组合出常见的 UI 模块结构：

VStack(spacing: 20) {
    HStack {
        Text("用户名:")
        Text("黄花菜")
    }

    HStack {
        Text("邮箱:")
        Text("example@example.com")
    }

    Divider()

    ZStack {
        Color.green.opacity(0.2)
        Text("卡片内容")
            .padding()
    }
    .cornerRadius(10)
}
.padding()

**提示：**嵌套层级不要太深。对于重复区域或逻辑复杂的部分，建议封装为子组件或单独视图文件。

七、图示总结

Stack 类型	作用	示例说明
VStack	垂直堆叠视图	常用于表单、列表、栏目
HStack	水平堆叠视图	常用于头像+名称、按钮组合
ZStack	视图重叠堆叠	常用于背景图、标记层、浮层按钮等
Spacer	弹性空白占位	用于居中、底部对齐、撑开两端
Divider	分隔符线条	分隔信息区块、内容列表

---

八、小结

Stack 是 SwiftUI 布局的基础构建单元，理解 VStack / HStack / ZStack 的组合逻辑后，你几乎可以构建出所有常见页面结构。配合 Spacer 和 Divider，可以实现更加灵活、美观、响应式的布局体验。