HStack、VStack 和 ZStack 的使用

在 SwiftUI 中，HStack、VStack 和 ZStack 是三种核心布局容器，用于控制视图的位置、对齐方式以及排列方式。通过组合这三种布局容器，可以轻松实现复杂的 UI 布局。

1. HStack

HStack 用于水平排列子视图，子视图会从左到右依次排列。HStack 的对齐方式和间距可以自定义。

示例代码

HStack(spacing: 20) {
    Text("Left")
    Text("Center")
    Text("Right")
}

在这个例子中，HStack 将三个 Text 视图水平排列，并在每个视图之间设置 20 的间距。

使用 alignment 和 spacing

HStack 支持通过 alignment 参数来控制子视图的垂直对齐方式，通过 spacing 参数来控制视图之间的间距。

HStack(alignment: .top, spacing: 10) {
    Text("Top")
    Text("Middle")
    Text("Bottom")
}

在这个例子中，所有的 Text 视图顶部对齐，每个视图之间的间距为 10。

2. VStack

VStack 用于垂直排列子视图，子视图会从上到下依次排列。VStack 同样可以设置对齐方式和间距。

示例代码

VStack(spacing: 15) {
    Text("Top")
    Text("Middle")
    Text("Bottom")
}

在这个例子中，VStack 将三个 Text 视图垂直排列，每个视图之间有 15 的间距。

使用 alignment 和 spacing

VStack 支持通过 alignment 参数来控制子视图的水平对齐方式，通过 spacing 参数来控制视图之间的间距。

VStack(alignment: .leading, spacing: 10) {
    Text("Leading")
    Text("Center")
    Text("Trailing")
}

在这个例子中，所有的 Text 视图左对齐，每个视图之间的间距为 10。

3. ZStack

ZStack 用于在 Z 轴上堆叠视图，即将视图重叠显示。ZStack 的第一个视图在最底层，后面的视图依次在上方显示。

示例代码

ZStack {
    Color.blue
        .frame(width: 100, height: 100)
    Text("Overlay Text")
        .foregroundColor(.white)
}

在这个例子中，蓝色的 Color 视图位于底层，Text 视图叠加在其上方，并显示为白色字体。

使用 alignment

ZStack 支持通过 alignment 参数来控制所有子视图在 Z 轴上的对齐方式。

ZStack(alignment: .bottomTrailing) {
    Color.red
        .frame(width: 100, height: 100)
    Text("Bottom Right")
        .foregroundColor(.white)
        .padding()
}

在这个例子中，Text 视图将对齐到 ZStack 的右下角位置。

综合示例：组合使用 HStack、VStack 和 ZStack

通过组合这三种布局容器，可以实现更复杂的 UI 布局。

VStack {
    Text("Top of VStack")
        .font(.headline)

    HStack {
        Text("Left")
        Spacer()
        Text("Right")
    }
    .padding()
    .background(Color.gray)

    ZStack {
        Color.green
            .frame(width: 100, height: 100)
        Text("Overlay")
            .foregroundColor(.white)
    }
}
.padding()

解释

VStack 包含三个主要元素：

  • 顶部的 Text 显示标题。
  • 中间的 HStack 左右对齐两个 Text 视图，并使用 Spacer 填充空白。
  • 底部的 ZStack 叠加了一个绿色背景和文本 Overlay。

总结

  • HStack：水平排列子视图，用于创建横向布局。
  • VStack：垂直排列子视图，用于创建纵向布局。
  • ZStack：重叠排列子视图，用于创建覆盖布局。

通过灵活组合使用这三种布局容器，可以快速构建响应式、简洁的 UI 布局。

Last Updated::