SwiftUI：堆栈和组

除了Hello World之外，没有一个SwiftUI应用只有一个视图。

当你想添加一个以上的视图时，你需要把它们添加到一个栈中。

有3种堆栈。

• HStack 使项目在X轴上对齐
• VStack 在Y轴上对齐项目
• ZStack 在Z轴上对齐项目

让我们回到 "Hello World "应用程序。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello World")
    }
}

要添加第二个Text 视图，我们不能这样做。

struct ContentView: View {
    var body: some View {
        Text("Hello World")
        Text("Hello again!")
    }
}

但我们必须将这些视图嵌入到一个堆栈中。

让我们试试用VStack 。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello World")
            Text("Hello again!")
        }
    }
}

看到了吗？视图是垂直排列的，一个接一个。

这里是HStack 。

这里是ZStack ，它把项目一个一个地放在前面，在这种情况下会产生一个混乱。

ZStack 例如，把一个背景图片和一些文字放在上面是很有用的。这是你能想到的最简单的用例。

在SwiftUI ，我们使用这3个堆栈来组织我们所有的用户界面。

我们还使用Group ，这个视图与堆栈类似，可以用来将多个视图组合在一起，但与堆栈视图相反，它不影响布局。

VStack {
    Group {
        Text("Hello World")
        Text("Hello again!")
    }
}

除了我们接下来要看到的将修改器应用于子视图之外，还有一个可能对分组很方便的用例是，视图只能有10个子视图。所以你可以使用Group ，将最多10个视图组合成一个

Group 而堆叠的视图也是视图，所以它们也有修改器。

有时修改器会影响它们所应用的视图，就像在这个例子中。

Text("Hello World") 
.font(.largeTitle)

但有时它们被用来同时对多个视图应用相同的属性。

像这样。

VStack {
    Text("Hello World")
    Text("Hello again!")
}
.font(.largeTitle)

看到了吗？通过将font() 修改器应用到VStack ，.largeTitle 字体被应用到两个Text 视图。

这对我们称之为环境修改器的修改器是有效的。不是每个修改器都可以这样工作，但有些修改器可以，比如上面的例子。