在 SwiftUI 中，ZStack 的 alignment 参数允许你指定其所有子视图的默认对齐方式，例如将视图对齐到 top, center, 或 bottom，而这种功能在 HStack 和 VStack 中是通过其他机制实现的，比如 alignment 参数但作用逻辑不同。

下面来详细探讨 ZStack 的对齐能力 以及 HStack 和 VStack 的对齐特性。

1. 为什么 ZStack 可以将内容对齐到底部？ #

ZStack 的 alignment 参数的作用 #

• ZStack 的 alignment 参数 允许你指定其子视图的对齐方式：
  • 默认为 .center（居中对齐）。
  • 可选值包括：.top, .topLeading, .bottom, .bottomTrailing 等。
• 这些对齐方式的作用在于，内部的 所有子视图都将根据这个对齐方式放置在指定位置。具体位置是在 ZStack 的边界内的相应区域。

示例： #

ZStack(alignment: .bottom) {
    Color.red
        .frame(height: 400)
    VStack {
        Text("Hello").font(.largeTitle)
        Text("World").font(.subheadline)
    }
}
.frame(height: 500)

• 解释：
  • ZStack 将其内容（VStack）对齐到容器的底部。
  • 同时所有子视图以 bottom 对齐，达成一个统一的对齐配置。

2. HStack 和 VStack 的对齐能力 #

HStack 和 VStack 的 alignment 参数 #

与 ZStack 类似，HStack 和 VStack 也有一个 alignment 参数，但它们的行为和 ZStack 不太一样，因为 它们的对齐方向是横向布局（HStack）或纵向布局（VStack）。

(A) HStack #

HStack 的 alignment 控制垂直方向的子视图对齐方式（也就是沿 y 轴）。

支持的对齐方式： #

• .top：将子视图的顶部对齐。
• .center：沿着垂直中心对齐（默认）。
• .bottom：子视图的底部对齐。
• 自定义对齐，例如某个子视图以 baseline 对齐。

示例代码： #

HStack(alignment: .bottom) {
    Text("Hello")
        .font(.largeTitle)
    Text("World")
        .font(.footnote)
        .background(Color.yellow)
}
.frame(height: 100)

• 解释：
  • HStack 将其子视图的底部对齐。
  • 子视图中较高的字体会保持底部对齐，而不会自动水平居中。

(B) VStack #

VStack 的 alignment 控制水平方向的子视图对齐方式（也就是沿 x 轴）。

支持的对齐方式： #

• .leading：将子视图的左边对齐。
• .center：沿着水平方向的中心对齐（默认）。
• .trailing：将子视图的右边对齐。
• 自定义对齐，如指定某个子视图的 alignmentGuide。

示例代码： #

VStack(alignment: .leading) {
    Text("Hello").font(.largeTitle)
    Text("World").font(.footnote)
}
.frame(width: 200)
.background(Color.red)

• 解释：
  • VStack 的子视图都靠左对齐（alignment: .leading）。
  • 它不会像 ZStack 那样将子视图对齐到容器的特定位置，而是根据子视图的相对顺序来布局。

对齐总结 #

3. 自定义对齐方式 #

SwiftUI 允许通过 alignmentGuide 完全自定义对齐规则，例如：

HStack(alignment: .center) {
    Text("SwiftUI")
        .alignmentGuide(.center) { context in
            context[.bottom] + 10 // 调整对齐偏移量
        }
    Text("Rocks!")
}

• 在上面的代码中，alignmentGuide 调整了某个子视图的对齐参考点，通过偏移实际的底部对齐，使子视图在布局中偏移上下位置。

4. 为什么只有 ZStack 能对齐到容器边缘？ #

这是因为 ZStack 的作用是“层叠布局”，用于将子视图按层叠放置，同时它的 alignment 参数定义了子视图相对于 整个 ZStack 容器边界 的对齐方式。

而 HStack 和 VStack 基于行或列的布局：

• HStack 和 VStack 的 alignment 只是用于调整子视图之间的对齐（它们不会考虑 HStack/VStack 容器的边界）。
• 只有 ZStack 能影响子视图在整个容器上的绝对对齐。

5. 示例：模拟 HStack 和 VStack 对齐到屏幕边缘 #

如果你想实现类似 ZStack 的能力，也可以借助 Spacer 将 HStack 或 VStack 内容对齐到特定位置：

VStack {
    Spacer() // 将内容推到底部
    Text("Content at Bottom")
}
.frame(height: 300)
.background(Color.red)

这实际上不是通过 alignment，而是通过 Spacer 动态调整布局。

结论 #

总结来说，ZStack 提供了比 HStack 和 VStack 更灵活的 容器边界对齐，但所有的布局容器都有各自的擅长领域。你可以通过 ZStack、HStack、VStack 与 Spacer 结合使用来实现更加复杂的 UI。