为你的内容选择容器视图

概览

SwiftUI 提供广泛的容器视图，用于视图的分组和重复。一些容器专用于打造结构和布局，例如 Stack 视图、惰性 Stack 视图和 Grid 视图。另一些容器，例如 List 和 Form，也采用系统标准的视觉效果和交互。

为 App 用户界面的每个部分选择最合适的容器视图，是一项需要学习的重要技能；从确定相邻两个视图的位置，到使用数百种元素创建复杂的布局，它能在方方面面为你提供帮助。

对视图集合进行分组

Stack 视图是 SwiftUI 中最原始的布局容器。利用 Stack 可以将视图集合按水平线或垂直线分组，或将视图相互叠放。

使用 HStack (英文) 可以将视图置于水平线上，使用 VStack (英文) 可以将视图置于垂直线上，而使用 ZStack (英文) 则可以将视图相互叠放。然后，合并 Stack 视图以构建更为复杂的布局。这三种 Stack 及其对齐和间隔属性、视图修饰符与 Spacer (英文) 视图相结合，可以实现极大的布局灵活性。

你通常使用 Stack 视图作为其他容器视图中的构建块。例如，List (英文) 通常包含 Stack 视图，你用它来布置每行中的视图。

有关使用 Stack 视图布置视图的更多信息，请参阅“使用 Stack 视图构建布局”。

重复视图或视图组

你还可以使用 HStack (英文)、VStack (英文)、LazyHStack (英文) 和 LazyVStack (英文) 来重复视图或视图组。在 ScrollView (英文) 中放置一个 Stack 视图，这样你的内容便可以扩展到其容器的边界之外。用户可以同时水平滚动、垂直滚动或双向滚动。

堆栈视图和惰性堆栈具有相似的功能，可能给人感觉它们能够互换，但是，它们在不同情况下有各自的优势。堆栈视图会一次性载入所有子视图，布局性能快且可靠，因为系统在载入每个子视图时就知道它们的大小和形状。惰性堆栈会为了性能而损失一定程度的布局正确性，原因是系统仅在子视图可见时才会计算它们的几何结构。

在选择要使用的堆栈视图类型时，请始终先选择标准堆栈视图，并且仅在对代码进行性能分析后证明值得提升性能时，才应切换到惰性堆栈。有关惰性堆栈视图以及如何衡量 App 的视图载入性能的更多信息，请参阅“创建高性能的可滚动堆栈”。

在二维布局中放置视图

要同时以水平方式和垂直方式布置视图，请使用 LazyVGrid (英文) 或 LazyHGrid (英文)。若要布置自然显示在正方形容器中的内容 (例如，图像图库)，网格是一个非常好的容器选择。另外，若要放大用户界面布局以在较大的设备上显示，网格也是一个不错的选择。例如，联系信息目录可能适合以列表或垂直堆栈的形式显示在 iPhone 上，但是，如果将目录放大以在更大的设备 (例如 iPad 或 Mac) 上显示时，采用网格布局的形式可能更自然。

与堆栈视图一样，SwiftUI 网格视图并不包含固有的滚动视口；如果相关内容可能超出可用的空间，应将它们置于一个 ScrollView (英文) 中。

显示数据集并与之交互

SwiftUI 中的 List (英文) 视图在概念上与 LazyVStack (英文) 和 ScrollView (英文) 的组合类似，但默认情况下会在内容元素之间和周围应用适合平台的视觉样式。例如，在 iOS 上运行时，List (英文) 的默认配置会在各行之间添加分隔线，并且如果 List 包含在 NavigationView (英文) 里，它会给具有导航功能的内容元素绘制详情指示符。

List (英文) 视图还支持为常见任务 (例如，插入、重新排序和移除项目) 提供与平台相对应的交互。例如，通过将 onDelete(perform:) (英文) 修饰符添加到 List (英文) 中的 ForEach (英文)，可以实现系统标准的轻扫以删除交互。

与 LazyHStack (英文) 和 LazyVStack (英文) 一样，SwiftUI List (英文) 中的行也会以惰性方式载入，没有对应的非惰性载入方式。List 本身会在必要时滚动，你不需要将它们包装在 ScrollView (英文) 中。

为数据输入组合视图和控件

使用 Form (英文) 可以组合系统标准控件，构建数据输入界面、设置或偏好设置窗口。

与所有 SwiftUI 视图一样，表单以平台适用的方式显示其内容。请注意，Form (英文) 中的控件布局可能因平台不同而存在很大的差异。例如，在 iOS 上，Form (英文) 中的 Picker (英文) 控件会添加导航，从而在单独屏幕上显示选择器的选项，而在 macOS 上，同一个 Picker (英文) 控件会显示弹出式按钮或一组单选按钮。