iOS SwiftUI 创建和组合视图 1.1

第三节 使用栈来组合视图

上一节创建了标题视图，接下来要添加一些文本视图来描述地标所在州及所在公园的名称等其它详细信息

创建SwiftUI视图就是在body属性中描述视图的内容、布局及行为，但body属性只返回单个视图，这时组合多个视图时可以把它们放入一个栈中，通过水平、垂直、前后嵌套多个视图完成视图组合，做为一个整体在body属性中返回

这一节中，使用一个垂直栈，把标题放在包含公园详情的水平栈的上方，在水平栈中，布局公园详情相关的内容

可以使用Xcode提供的结构化布局来把视图嵌套在容器视图中

步骤1 按下Command键的同时，点击Text视图的初始化代码打开结构化编辑弹窗，然后选择把控件嵌套在垂直栈中(Embed in VStack)，在栈中添加Text View控件可以从组件中直接拖进栈中完成

步骤2 点击Xcode右上角的+号，托动一个Text控件到指定位置，代码立即就会在编辑器中补全

步骤3 把Text视图的占位文本修改为Joshua Tree Nation Park，视图会自动调整位置布局

步骤4 设置位置控件的字体为子标题样式

步骤5 设置VStack初始化参数为左对齐内部的子视图。默认情况下，栈会把内部视图在自己的主轴上居中对齐，并自动计算各子视图的间距。下一步要添加一个Text控制用来描述公园的状态，它水平排列在位置信息的右边。

步骤6 在画布内，command按下的同时点击位置视图，在弹出的菜单中选择嵌入到水平栈中(Embed in HStack)

步骤7 在位置控件的后面加一个公园状态的Text视图，并把占位文字改为California，字体设置为子标题样式

步骤8 为了水平布局使用整个屏幕宽度，在位置控件和公园状态控件中间添加一个Spacer控件，用来填充两个控件中间的空白部分，并把两个控件分别顶向屏幕的两侧。Spacer是一个可以伸缩的空白控件，他负责占用其它控件布局完成后剩下的所有空间。

步骤9 使用padding()修改器给地标信息内容视图整体加内边距