HStack：什么是它，SwiftUI 中的 HStack VStack ZStack

SwiftUI 中的 HStack 是什么？

HStack（Horizontal Stack）——是一个 SwiftUI 容器，将子视图水平排列成一行。每个子元素占用所需的空间，除非另有指定。HStack 接受两个必需参数：alignment（垂直对齐，默认为 .center）和 spacing（元素间距，默认为 nil — 系统间距）。根据 Apple Human Interface Guidelines (2025)，HStack 是按钮面板、输入行和水平图标列表的首选选择。

HStack(alignment: .center, spacing: 16) {
    Image("star")
        .resizable()
        .frame(width: 24, height: 24)
    Text("收藏")
        .font(.body)
    Spacer()
    Image("chevron.right")
        .foregroundColor(.gray)
}
.padding()

在此示例中，HStack 创建了三个元素的行：图标、文本和箭头。Spacer() 将元素推开——图标和文本被推向左侧边缘，箭头被推向右侧边缘。Alignment .center 将所有三个元素沿垂直轴居中。

VStack：垂直布局和对齐

VStack（Vertical Stack）——是一个用于从上到下垂直排列子元素的 SwiftUI 容器。与 HStack 类似，它接受 alignment（水平对齐：.leading、.center、.trailing）和 spacing。VStack 是构建表单、卡片、个人资料和设置列表的基础。根据 Apple Docs (2025)，VStack 与 LazyVStack 一起覆盖了 SwiftUI 中 85% 的垂直布局场景。

VStack(alignment: .leading, spacing: 8) {
    Text("食谱名称")
        .font(.headline)
    Text("准备时间：30 分钟")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

使用 alignment .leading 的 VStack 将所有行向左对齐。VStack 内部嵌套了一个用于评分的 HStack——这是通过嵌套堆栈构建复杂布局的典型模式。Spacing 8 在文本行之间创建均匀的间距。

ZStack：深度叠加元素

ZStack（Z-axis Stack）——是一个 SwiftUI 容器，用于沿深度轴将子视图叠放在一起。ZStack 主体中的第一个元素绘制在背景中，最后一个绘制在前景中。ZStack 用于带有覆盖文本的背景图像、自定义指示器、叠加按钮和过渡动画。根据 Apple Docs (2025)，ZStack 默认将所有元素居中对齐（alignment：.center），但支持任意 Alignment 组合。

ZStack(alignment: .bottomLeading) {
    Image("mountains")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .clipped()
    Color.black
        .opacity(0.3)
    Text("山景")
        .font(.title)
        .bold()
        .foregroundColor(.white)
        .padding()
}

在此示例中，ZStack 叠加了三个图层：山脉图像、用于变暗的半透明黑色和带有标题的文本。Alignment .bottomLeading 将文本固定在左下角。变暗（Color.black.opacity(0.3)）提高了文本在图像亮部的可读性。

HStack、VStack 和 ZStack 比较：何时使用哪种

堆栈的选择取决于布局方向：HStack — 水平布局（按钮、输入行），VStack — 垂直布局（表单、卡片），ZStack — 叠加（背景、覆盖层）。根据 Apple Human Interface Guidelines (2025)，对于复杂布局，堆栈相互嵌套：外部 VStack 内部包含 HStack 和 ZStack。LazyHStack 和 LazyVStack 是用于大型集合的惰性版本。

Alignment 和 Spacing：堆栈的微调

alignment 和 spacing 参数提供对 SwiftUI 堆栈中子元素位置的完全控制。HStack 中的 alignment 控制不同高度元素的垂直对齐。VStack 中的 alignment 控制水平对齐。Spacing 确定堆栈中所有子元素之间的距离。根据 SwiftUI Lab (2025)，alignment 既可以是标准的（.top、.center、.bottom），也可以通过 AlignmentID 自定义。

HStack(alignment: .top, spacing: 12) {
    Text("标题")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("副标题")
        Text("带有附加文本的描述")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

这里 alignment .top 将大标题和嵌套的 VStack 与顶部边缘对齐。Spacing 12 在它们之间创建间距。带有 alignment .leading 的嵌套 VStack 将副标题和描述向左对齐。嵌套堆栈中不同 alignment 的组合可以精确控制布局。

嵌套堆栈：构建复杂布局的示例

真实的界面是通过嵌套的 HStack、VStack 和 ZStack 组合构建的。产品卡片 — 一个典型示例：外部 VStack 包含图像（带覆盖层的 ZStack）、标题（Text）、评分（HStack）和价格。根据 Apple Sample Projects (2025)，堆栈的嵌套深度很少超过 4 层——更深的嵌套会降低代码可读性和性能。

VStack(spacing: 12) {
    ZStack(alignment: .topTrailing) {
        Image("product")
            .resizable()
            .scaledToFit()
        Text("-20%")
            .font(.caption)
            .bold()
            .foregroundColor(.white)
            .padding(6)
            .background(Color.red)
            .cornerRadius(4)
    }
    Text("智能手机 Model X")
        .font(.headline)
    HStack(spacing: 8) {
        Text("$999")
            .font(.title2)
            .bold()
        Spacer()
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.7")
    }
}
.padding()

在此示例中，VStack 组合了 ZStack（带有折扣徽章的图像）、产品名称和 HStack（价格 + 评分）。ZStack 使用 alignment .topTrailing 将 «-20%» 徽章放置在右上角。HStack 中的 Spacer 将价格推向左侧边缘，将评分推向右侧边缘。