使用 Stack 组合视图 #

在上一节中我们创建了标题视图，现在还需要添加文本视图，包含有关地标的细节，如公园的名称和它所在的州。

在创建 SwiftUI 视图时，我们可以在视图的 body 属性中描述其内容、布局和行为；但是，body 属性只能返回单个视图。所以我们可以在 stack 中组合和嵌入多个视图，stack 可以将视图水平、垂直或从后到前的顺序组合在一起。

在本节中，我们将使用水平的 stack 来显示公园的详细信息，再用垂直的 stack 将标题放在详细信息的上面。

我们可以使用 Xcode 的结构化编辑功能，将一个视图嵌入到一个容器视图中，也可以使用检查器或 help 找到更多帮助内容。

第 1 步 #

按住 command 键并点击 Text 视图，在编辑窗口中选择 Embed in VStack。

接下来，我们将从 Library 中拖动一个 Text 视图来添加到 stack 中。

第 2 步 #

点击 Xcode 窗口右上方的加号按钮 (+) 来打开 Library，然后拖动一个 Text 视图放到 Turtle Rock 代码下面的位置。

第 3 步 #

将 Text 视图的占位符文本替换为 Joshua Tree National Park”。

接下来需要调整该视图以达到布局需求。

第 4 步 #

将 Text("Joshua Tree National Park") 的 font 设置为 subheadline。

第 5 步 #

编辑 VStack 的初始化方法，让视图以 leading方式 对齐。

接下来，我们将在地点的右边添加另一个文本视图，以显示公园的状态。

第 6 步 #

在画布上，按住 command 键并点击 Joshua Tree National Park，选择 Embed in HStack。

第 7 步 #

在地点之后添加一个新的文本视图，将 Placeholder 改为 California，然后设置 font 为 subheadline。

第 8 步 #

为了让布局充满设备的全部宽度，通过在容纳两个文本视图的水平 stack 中添加一个 spacer 来分离 Joshua Tree National Park 和 California。

spacer 可以使其包含的视图自动使用父视图的所有空间，而不是根据内容大小来定义宽度和高度。

第 9 步 #

最后，使用 padding() 修饰符，给地标的名称和细节留出多一点空间。