struct HStack (英文)
在水平线上排列其子项的视图。
struct VStack (英文)
在垂直线上排列其子项的视图。
struct ZStack (英文)
叠放其子项并沿两个轴将它们对齐的视图。
概览
单独的 HStack (英文)、VStack (英文) 和 ZStack (英文) 均属于简单视图。HStack (英文) 可以将视图置于水平线上，VStack (英文) 可以将视图置于垂直线上，而 ZStack (英文) 则可以将视图相互叠放。
当你使用默认参数初始化它们时，stack 视图会将其内容居中对齐，并在每个所含视图之间插入少量间隔。但是，当你使用视图修饰符 Spacer (英文) 和 Divider (英文) 视图合并和自定 stack 时，你可以创建高度灵活的复杂布局。
规划你的布局层次结构
当你开始将设计转换为代码时，在布局方面，请考虑可以如何使用各种类型的 stack 视图创建布局。将复杂设计细分为你可以通过 stack 视图构建的更小、更简单的部分。
例如，你可以使用三种 stack 视图构建以下个人资料视图：
ZStack (英文) 包含一个显示个人资料图片的 Image (英文) 视图，后者顶部叠加了一个半透明 HStack (英文)。HStack (英文) 包含一个 VStack (英文)，后者内部有一对 Text (英文) 视图，Spacer (英文) 视图将 VStack (英文) 推向前缘侧。
若要创建这个 stack 视图，请使用以下代码：
struct ProfileView: View {
var body: some View {
ZStack(alignment: .bottom) {
Image("ProfilePicture")
.resizable()
.aspectRatio(contentMode: .fit)
HStack {
VStack(alignment: .leading) {
Text("Rachael Chiseck")
.font(.headline)
Text("Chief Executive Officer")
.font(.subheadline)
}
Spacer()
}
.padding()
.foregroundColor(.primary)
.background(Color.primary
.colorInvert()
.opacity(0.75))
}
}
}
通过 Alignment 和 Spacer 视图确定视图位置
通过组合使用 alignment 属性、Spacer (英文) 和 Divider (英文) 视图，对齐 stack 视图中包含的任意视图。
在前面的示例布局中，包含两个 Text (英文) 视图的 VStack (英文) 使用 leading (英文) 对齐：
alignment 属性不会调整 VStack (英文) 相对于其父容器的布局，而是调整 VStack (英文) 内部视图的布局。
VStack (英文) 的 alignment 属性仅会应用于使用 Horizontal (英文) 对所含控件的水平对齐。同样，HStack (英文) 的 alignment 属性仅控制使用 Vertical (英文) 的垂直对齐。最后，你可以使用 Alignment (英文) 沿两个轴对齐 ZStack (英文) 中的视图。
Spacer (英文) 视图用于沿 HStack (英文) 或 VStack (英文) 的主轴对齐视图。Spacer 会进行扩展以填充所有可用空间，并将内容从其他视图或 stack 的边缘推开。
Divider (英文) 视图还会在 stack 的子视图之间添加空间，但仅会插入足够沿 stack 的副轴绘制一条直线的空间。它们不会进行扩展来填充可用的空间。
创建自适应布局而不是显式布局
尽可能定义结构和层次结构，而不是显式确定视图框架的位置。不要为视图使用显式高度和宽度，而应让它们进行扩展以填充可用空间。你构建的自适应布局更容易适应不同的设备大小和平台。
通过以显式方式操控 Text (英文) 视图框架，可以使用两个而不是三个 stack 视图来创建这篇文章的示例布局。尽管输出看起来可能相同，但用来实施的代码更加脆弱，并且还可能无法在不同大小类别的设备之间进行缩放。
你可能需要使用 frame(width: (英文) 或 position(x: (英文) 等视图修饰符来对使用显式调整的布局进行调整，但仅当你无法以灵活的自适应方式获得所需布局才应考虑此方法。有关对视图布局进行精细调整的更多信息，请参阅“对视图的位置进行精细调整 (英文)”。
以替代方式添加深度
在某些情况下，可能需要使用 overlay(_: (英文) 和 background(_: (英文) 视图修饰符而不是 ZStack (英文) 来为你的布局添加深度。Background 视图修饰符将另一个视图置于你正在修饰的视图之后，overlay 则是在其顶部放置一个视图。
根据你想要如何确定最终布局的大小，在基于 stack 的方法和视图修饰符方法之间进行选择。如果你的布局有一个定义布局大小的主导视图，请在该视图上使用 overlay(_: (英文) 或 background(_: (英文) 视图修饰符。如果你想通过汇总所有所含视图得出最终视图大小，请使用 ZStack (英文)。
例如，以下代码会在 Image (英文) 视图的顶部叠加一个 Profile 视图：
struct ProfileViewWithOverlay: View {
var body: some View {
VStack {
Image("ProfilePicture")
.resizable()
.aspectRatio(contentMode: .fit)
.overlay(ProfileDetail(), alignment: .bottom)
}
}
}
struct ProfileDetail: View {
var body: some View {
HStack {
VStack(alignment: .leading) {
Text("Rachael Chiseck")
.font(.headline)
Text("Chief Executive Officer")
.font(.subheadline)
}
Spacer()
}
.padding()
.foregroundColor(.primary)
.background(Color.primary
.colorInvert()
.opacity(0.75))
}
}