Picking container views for your content
为您的内容选择容器视图
通过使用堆栈、网格、列表和表单来构建灵活的用户界面。
Overview 概述
SwiftUI provides a range of container views that group and repeat views. Use some containers purely for structure and layout, like stack views, lazy stack views, and grid views. Use others, like lists and forms, to also adopt system-standard visuals and interactivity.
SwiftUI 提供了一系列容器视图，用于分组和重复视图。一些容器纯粹用于结构和布局，例如堆叠视图、延迟堆叠视图和网格视图。其他容器，如列表和表单，则还采用系统标准的视觉效果和交互性。
Choosing the most appropriate container views for each part of your app’s user interface is an important skill to learn; it helps you with everything from positioning two views next to each other, to creating complex layouts with hundreds of elements.
选择最合适的容器视图用于应用程序用户界面的每个部分是一项重要技能；它可以帮助您完成从将两个视图并排放置到创建包含数百个元素的复杂布局的所有任务。
Group collections of views
组集合视图
Stack views are the most primitive layout container available in SwiftUI. Use stacks to group collections of views into horizontal or vertical lines, or to stack them on top of one another.
堆叠视图是 SwiftUI 中最原始的布局容器。使用堆叠视图将视图集合分组为水平或垂直线，或者将它们堆叠在一起。
Use HStack to lay out views in a horizontal line, VStack to position views in a vertical line, and ZStack to layer views on top of one another. Then, combine stack views to compose more complex layouts. These three kinds of stacks, along with their alignment and spacing properties, view modifiers, and Spacer views combine to allow extensive layout flexibility.
使用 HStack 将视图水平排列，使用 VStack 将视图垂直定位，以及使用 ZStack 将视图层叠。在此基础上，组合堆叠视图以构建更复杂的布局。这三种堆栈以及它们的对齐和间距属性、视图修饰符和 Spacer 视图结合在一起，提供了广泛的布局灵活性。
You often use stack views as building blocks inside other container views. For example, a List typically contains stack views, with which you lay out views inside each row.
您通常将堆叠视图作为其他容器视图中的构建块。例如，列表 通常包含堆叠视图，您可以使用这些视图在每一行中布局视图。
For more information on using stack views to lay out views, see Building layouts with stack views.
有关使用堆叠视图布局视图的更多信息，请参见 使用堆叠视图构建布局。
Repeat views or groups of views
重复的视图或视图组
You can also use HStack, VStack, Lazy, and Lazy to repeat views or groups of views. Place a stack view inside a Scroll so your content can expand beyond the bounds of its container. Users can simultaneously scroll horizontally, vertically, or in both directions.
你还可以使用 HStack、VStack、Lazy 和 Lazy 来重复视图或视图组。将堆栈视图放入 Scroll 中，这样你的内容可以超出其容器的边界。用户可以同时水平、垂直或双向滚动。
Stack views and lazy stacks have similar functionality, and they may feel interchangeable, but they each have strengths in different situations. Stack views load their child views all at once, making layout fast and reliable, because the system knows the size and shape of every subview as it loads them. Lazy stacks trade some degree of layout correctness for performance, because the system only calculates the geometry for subviews as they become visible.
堆叠视图和懒加载堆叠视图具有类似的功能，它们可能感觉可以互换，但在不同情况下各有优点。堆叠视图会一次性加载所有子视图，使布局快速且可靠，因为系统在加载时就知道每个子视图的大小和形状。懒加载堆叠视图在性能上牺牲了一定程度的布局准确性，因为系统仅在子视图变得可见时计算其几何形状。
When choosing the type of stack view to use, always start with a standard stack view and only switch to a lazy stack if profiling your code shows a worthwhile performance improvement. For more information on lazy stack views and how to measure your app’s view loading performance, see Creating performant scrollable stacks.
在选择要使用的堆叠视图类型时，请始终从标准堆叠视图开始，只有在对代码进行性能分析时显示有值得的性能提升时才切换到懒堆叠视图。有关懒堆叠视图及如何测量您的应用程序视图加载性能的更多信息，请参见创建高性能可滚动堆叠。
Position views in a two-dimensional layout
在二维布局中定位视图
To lay out views horizontally and vertically at the same time, use a Lazy or Lazy. Grids are a good container choice to lay out content that naturally displays in square containers, like an image gallery. Grids are also a good choice to scale user interface layouts up for display on larger devices. For example, a directory of contact information might suit a list or vertical stack on an iPhone, but might fit more naturally in a grid layout when scaled up to a larger device like the iPad or Mac.
要同时水平和垂直布局视图，请使用Lazy或Lazy。网格是布局自然在正方形容器中显示内容的好选择，例如图像库。网格也是在更大的设备上扩展用户界面布局的好选择。例如，联系信息的目录在 iPhone 上可能适合列表或垂直堆叠，但在扩展到更大的设备如 iPad 或 Mac 时，可能更自然地适合网格布局。
Like stack views, SwiftUI grid views don’t inherently include a scrolling viewport; place them inside a Scroll if the content might be larger than the available space.
与堆栈视图一样，SwiftUI 网格视图本身不包含滚动视口；如果内容可能大于可用空间，请将它们放在 Scroll 中。
Display and interact with collections of data
显示和与数据集合互动
List views in SwiftUI are conceptually similar to the combination of a Lazy and Scroll, but by default will include platform-appropriate visual styling around and between their contained items. For example, when running on iOS, the default configuration of a List adds separator lines between rows, and draws disclosure indicators for items which have navigation, and where the list is contained in a Navigation.列表 在 SwiftUI 中在概念上类似于 Lazy 和 Scroll 的组合，但默认情况下会包含适合平台的视觉样式，围绕并在其包含的项目之间。例如，在 iOS 上运行时，列表 的默认配置在行与行之间添加分隔线，并为具有导航的项目绘制披露指示器，并且列表被包含在 Navigation 中。
List views also support platform-appropriate interactivity for common tasks such as inserting, reordering, and removing items. For example, adding the on modifier to a For inside a List will enable system-standard swipe-to-delete interactivity.列表 视图还支持平台适当的交互性，以便进行常见任务，如插入、重新排序和删除项目。例如，将 on 修饰符添加到 For 中的 列表 将启用系统标准的滑动删除交互性。
Like Lazy and Lazy, rows inside a SwiftUI List also load lazily, and there is no non-lazy equivalent. Lists inherently scroll when necessary, and you don’t need to wrap them in a Scroll.
像 Lazy 和 Lazy 一样，SwiftUI List 中的行也会惰性加载，并没有非惰性的等价物。列表在必要时会自动滚动，你无需将它们包装在 Scroll 中。
Group views and controls for data entry
数据输入的组视图和控件
Use Form to build data-entry interfaces, settings, or preference screens that use system-standard controls.
使用 表单 来构建数据输入界面、设置或使用系统标准控件的首选项屏幕。
Like all SwiftUI views, forms display their content in a platform-appropriate way. Be aware that the layout of controls inside a Form may differ significantly based on the platform. For example, a Picker control in a Form on iOS adds navigation, showing the picker’s choices on a separate screen, while the same Picker on macOS displays a pop-up button or set of radio buttons.