SwiftUI 如何使用 VStack 和 HStack 创建堆栈？

我们的 SwiftUI 内容视图必须包含一个或多个视图，这是我们希望它们显示的布局。 当我们一次想要在屏幕上显示多个视图时，通常需要告诉 SwiftUI 如何安排它们，这就是堆栈的存放位置。

堆栈-等同于 UIKit 中的 UIStackView - 分为三种形式：水平(HStack)，垂直(VStack)和基于深度(ZStack)，当您要放置子视图以使其重叠时可以使用后者。

让我们从简单的事情开始。 这是一个文本视图：

Text("SwiftUI")

如果我们想在下面放置另一个，我们不能只创建第二个文本视图并希望达到最佳效果 – SwiftUI 不知道如何排列它们。

相反，我们需要将其放置在垂直堆栈中，以便我们的文本视图彼此重叠放置：

VStack {
    Text("SwiftUI")
    Text("rocks")
}

您会注意到，垂直堆栈位于屏幕的中心，标签也居中，并且标签之间也有一些自动间隔。

如果您希望水平并排放置标签，则将 VStack 替换为 HStack，如下所示：

HStack {
    Text("SwiftUI")
    Text("rocks")
}