2.1_如何使用VStack和HStack创建stacks

SwiftUI 的内容视图(content views)必须返回一个视图，即我们希望它们显示的视图。当我们想要一次性在屏幕上显示多个视图时，我们需要告诉 SwiftUI 如何排列它们，这就是 堆栈（stacks）的来源。

堆栈（Stacks） 相当于 UIKit 中的 UIStackView 。有三种形式:

• 水平（HStack）
• 垂直（VStack）
• 基于深度（ZStack）

当我们想放置子视图以便它们重叠时可以使用后者。

1. VStack

让我们从一些简单的事情开始，先创建一个文本视图:

struct ContentView: View {
    var body: some View {
        VStack {
            // 1. 创建一个文本视图
            Text("Hello SwiftUI")
                .background(Color.red)
        }
    }
}

效果预览:

如果我们想在下面再放一个文本视图，我们不能只写:

var body: some View {
    Text("Hello SwiftUI")
    Text("Hello M X")
}

这样的话，编译器会直接报错。

记住，我们只能返回一个视图，否则代码就不会工作。

那么怎么办呢？我们需要将其放置在 VStack 中，以便将文本视图放置在彼此上方:

struct ContentView: View {
    var body: some View {
        VStack {
            // 2. 创建两个文本视图
            Text("Hello SwiftUI")
                .background(Color.red)
            Text("hello M X")
                .background(Color.blue)
        }
    }
}

效果预览:

您会注意到: VStack 位于屏幕的中心，标签也居中，并且它们之间有一些自动间隔。

2. HStack

如果我们希望文本视图并排水平放置，请使用如下方式将 VStack 替换为 HStack:

struct ContentView: View {
    var body: some View {
        HStack {
            // 3. 水平放置
            Text("Hello SwiftUI")
                .background(Color.red)
            Text("hello M X")
                .background(Color.blue)
        }
    }
}

效果预览: