3 types of stacks in SwiftUI

在 SwiftUI 有三种类型的 stack：HStack、VStack 和 ZStack。

VStack

VStack 允许我们从顶部到底部垂直堆叠视图，我们可以通过向VStack 添加对齐方式或间距来进一步自定义视图。

VStack(alignment: .leading, spacing: 16) {
    Text("Hello, world!")
        .font(.title)
    Spacer()
    Text("Second line")
}

HStack

HStack用于水平堆叠视图。与 VStack 类似，我们可以设置对齐方式和间距。

HStack(alignment: .bottom, spacing: 16) {
    Text("Hello, world!")
        .font(.title)
    Spacer()
    Text("Second line")
}

Spacer

在SwiftUI中，默认情况下，堆叠将占用最小空间并居中对齐。Spacer对于将内容推动到使用最大空间至关重要。它还可用于对齐元素。

HStack(alignment: .bottom, spacing: 16) {
    Text("Hello, world!")
        .font(.title)
    Spacer()
    Text("Second line")
}
.padding()
.frame(width: 320)

ZStack

ZStack非常适合重叠内容。它在三维平面上堆叠图层。由于元素可以浮在彼此之上，因此ZStack的对齐方式将移动所有项目。

ZStack(alignment: .topLeading) {
    Rectangle()
        .foregroundColor(.blue)
    Text("Hello, world!")
        .font(.title)
    Spacer()
    Text("Second line")
}
.padding()
.frame(width: 320)

参考：

1. SwiftUI Essentials - Creating and combining views