SwiftUI基础组件之HStack、VStack、ZStack详解

引言

在 SwiftUI 中，布局是构建用户界面的基础。HStack、VStack 和 ZStack 是三个非常重要的容器视图组件，它们提供了强大而灵活的布局能力，能够帮助开发者轻松创建出各种复杂的界面。

一、HStack（水平堆栈）

1.1 基本概念

HStack 用于将其子视图按照水平方向排列，类似于将多个视图从左到右依次摆放。它是构建水平布局的常用组件。

1.2 基本创建

import SwiftUIstruct ContentView: View {var body: some View {HStack {Text("左")Text("中")Text("右")}.frame(width: 200,height: 100).background(.blue)}
}

在这个示例中，三个 Text 视图会在水平方向上依次排列，默认情况下它们之间会有一定的间距。

1.3 常用属性

1.3.1 spacing

spacing 属性用于设置子视图之间的间距。可以通过设置不同的值来调整间距大小。

import SwiftUIstruct ContentView: View {var body: some View {HStack(spacing: 30) {Text("左")Text("中")Text("右")}.frame(width: 200,height: 100).background(.blue)}
}

这里将子视图之间的间距设置为 30 点。

1.3.2 alignment

alignment 属性用于指定子视图在垂直方向上的对齐方式。常见的对齐方式有 .top（顶部对齐）、.center（居中对齐，默认值）、.bottom（底部对齐）等。

import SwiftUIstruct ContentView: View {var body: some View {HStack(alignment: .top,spacing:20){Text("左")Text("中").font(.largeTitle)Text("右")}.frame(width: 200,height: 200).background(.blue).border(Color.gray,width: 1)}
}

在这个例子中，两个 Text 视图会按照顶部对齐的方式排列。

二、VStack（垂直堆栈）

2.1 基本概念

VStack 与 HStack 相对，它用于将其子视图按照垂直方向排列，即从顶部到底部依次摆放子视图。

2.2 基本创建

import SwiftUIstruct ContentView: View {var body: some View {VStack {Text("上")Text("中")Text("下")}.frame(width: 200,height: 200).background(.blue)}
}

此示例中，三个 Text 视图会在垂直方向上依次排列。

2.3 常用属性

2.3.1 spacing

和 HStack 一样，VStack 的 spacing 属性用于设置子视图之间的垂直间距。

import SwiftUIstruct ContentView: View {var body: some View {VStack(spacing: 30) {Text("上")Text("中")Text("下")}.frame(width: 200,height: 200).background(.blue)}
}

这里将子视图之间的垂直间距设置为 30 点。

2.3.2 alignment

alignment 属性用于指定子视图在水平方向上的对齐方式。常见的对齐方式有 .leading（左对齐）、.center（居中对齐，默认值）、.trailing（右对齐）等。

import SwiftUIstruct ContentView: View {var body: some View {VStack(alignment: .leading,spacing: 30) {Text("上")Text("中").font(.largeTitle)Text("下")}.frame(width: 200,height: 200).background(.blue)}
}

在这个示例中，两个 Text 视图会按照左对齐的方式排列。

三、ZStack（深度堆栈）

3.1 基本概念

ZStack 用于将其子视图按照深度方向（即前后顺序）进行堆叠。子视图会按照添加的顺序依次堆叠，后添加的视图会覆盖在前添加的视图之上。

3.2 基本创建

import SwiftUIstruct ContentView: View {var body: some View {ZStack {Rectangle().foregroundColor(.blue).frame(width: 200, height: 200)Text("在上面")}}
}

在这个例子中，Text 视图会显示在 Rectangle 之上。

3.3 常用属性

3.3.1 alignment

alignment 属性用于指定子视图在 ZStack 中的对齐方式，它同时影响水平和垂直方向。常见的对齐方式有 .topLeading（左上角对齐）、.center（居中对齐，默认值）、.bottomTrailing（右下角对齐）等。

import SwiftUIstruct ContentView: View {var body: some View {ZStack(alignment: .topLeading) {Rectangle().foregroundColor(.blue).frame(width: 200, height: 200)Text("在左上角")}}
}

这里将 Text 视图和 Rectangle 按照左上角对齐的方式进行堆叠。

四、综合案例

案例将展示如何使用这些布局容器来创建一个简单的用户界面，其中包含文本、图像和按钮。我们将利用这些布局容器的常用属性来实现一个具有良好视觉层次结构的界面。

import SwiftUIstruct ProfileCardView: View {var body: some View {ZStack {// 背景颜色Color(.systemTeal).edgesIgnoringSafeArea(.all)VStack(spacing: 20) {// 头像和名称VStack {Image(systemName: "person.circle.fill").resizable().frame(width: 100, height: 100).foregroundColor(.white)Text("John Doe").font(.title).foregroundColor(.white)}// 个人信息VStack(alignment: .leading, spacing: 10) {HStack {Image(systemName: "envelope.fill").foregroundColor(.white)Text("[e-mail]").foregroundColor(.white)}HStack {Image(systemName: "phone.fill").foregroundColor(.white)Text("[phone]").foregroundColor(.white)}HStack {Image(systemName: "location.fill").foregroundColor(.white)Text("San Francisco, CA").foregroundColor(.white)}}Spacer()// 操作按钮HStack(spacing: 40) {Button(action: {print("Follow tapped")}) {Text("Follow").fontWeight(.bold).padding().background(Color.white).foregroundColor(.blue).cornerRadius(10)}Button(action: {print("Message tapped")}) {Text("Message").fontWeight(.bold).padding().background(Color.white).foregroundColor(.blue).cornerRadius(10)}}}.padding()}}
}

代码说明

• ZStack：用于创建背景层和内容层的叠加。背景颜色使用Color设置为 systemTeal，并通过edgesIgnoringSafeArea(.all)使背景颜色覆盖整个屏幕。
• VStack：用于垂直排列头像、名称、个人信息和按钮。spacing 属性用于设置子视图之间的间距。
• HStack：用于水平排列个人信息中的图标和文本，以及底部的操作按钮。spacing 属性用于设置子视图之间的间距。
• Image 和 Text：用于显示头像、名称和个人信息。通过 foregroundColor 设置颜色。
• Button：用于创建可交互的按钮，包含一个简单的操作示例（打印消息）。按钮样式通过 padding、background、foregroundColor 和 cornerRadius 设置。