SwiftUI：使用堆栈排列视图

当我们返回some View 给我们的 body 时，我们的意思是“一种符合View协议的特定类型。这可能是一个导航视图、一个表单、一个文本视图、一个选择器或其他一些完全不同的东西，但它总是完全符合View协议的一个东西。

如果我们想返回多个东西，我们有不同的选择，但三个特别有用。它们是HStack、VStack和ZStack，它们处理水平、垂直和、堆叠。

我们现在就试试吧。我们的默认模板如下：

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

它只返回一种视图，即文本视图。如果要返回两个文本视图，则不允许使用下面这种代码：

var body: some View {
    Text("Hello World")
    Text("This is another text view")
}

相反，我们需要确保SwiftUI得到的视图正好是一种，这就是堆栈的来源：它们允许我们说“这里有两个文本视图，我希望它们被定位成这样…”

因此，对于VStack（一个垂直的视图堆栈），这两个文本视图将一个放在另一个上面，如下所示：

var body: some View {
    VStack {
        Text("Hello World")
        Text("This is inside a stack")
    }
}

默认情况下，VStack在两个视图之间放置很少或没有间距，但是我们可以在创建堆栈时通过提供一个参数来控制间距，如下所示：

VStack(spacing: 20) {
    Text("Hello World")
    Text("This is inside a stack")
}

就像SwiftUI的其他视图一样，VStack最多可以有10个子节点——如果您想添加更多子节点，应该将它们包装在一个Group中。

默认情况下，VStack将其视图对齐以使其居中，但您可以使用其对齐(alignment)属性来控制它。例如，这会将文本视图与其前短对齐，在从左到右的语言（如英语）中，这将导致文本视图与左侧对齐：

VStack(alignment: .leading) {
    Text("Hello World")
    Text("This is inside a stack")
}

在VStack旁边我们有HStack用于水平排列。它的语法与VStack相同，包括添加间距和对齐：

HStack(spacing: 20) {
    Text("Hello World")
    Text("This is inside a stack")
}

垂直和水平堆栈会自动适应其内容，并倾向于将它们自己与可用空间的中心对齐。如果要更改，可以使用一个或多个间隔(Spacer)视图将堆栈内容推到一侧。这些将自动占用所有剩余空间，因此，如果在VStack的末尾添加一个，它会将把所有视图推到屏幕顶部：

VStack {
    Text("First")
    Text("Second")
    Text("Third")
    Spacer()
}

如果您添加了多个间隔，它们将分割它们之间的可用空间。

我们还有按深度排列的ZStack——它使视图重叠。在我们的两个文本视图中，这将使阅读变得相当困难：

ZStack {
    Text("Hello World")
    Text("This is inside a stack")
}

ZStack没有间距的概念，因为视图重叠，但是它有对齐方式。所以，如果在ZStack中有一个大的和一个小的东西，可以使这两个视图与顶部对齐，这样写：ZStack（alignment:.top）{。

ZStack从上到下、从后到前绘制内容。这意味着如果您有一个图像然后一个文本，ZStack按照该顺序绘制它们，那么将文本放在图像的顶部。

试着在一个垂直的堆栈中放置几个水平堆栈——你能做一个3x3的网格吗？

译自 Using stacks to arrange views >

Previous: SWeSplit 挑战	Hacking with iOS: SwiftUI Edition	Next: 颜色和视图位置

赏我一个赞吧~~~