在 SwiftUI 中，VStack、HStack 和 ZStack 是三种核心布局容器，用于排列和组合视图。这些布局方式允许你以灵活和直观的方式构建用户界面。
VStack（垂直堆叠）
VStack 是一个垂直布局容器，用于将子视图按顺序从上到下排列。每个视图按照它们被添加的顺序依次排列在前一个视图的下方。
基本使用
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("First Line")
Text("Second Line")
Text("Third Line")
}
}
}
在这个例子中，VStack 会将三个文本视图按垂直顺序排列在一起。
对齐和间距
你可以通过设置 alignment 和 spacing 来调整 VStack 的对齐方式和视图之间的间距。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(alignment: .leading, spacing: 20) {
Text("Aligned to the left")
Text("With custom spacing")
Text("And more text")
}
.padding()
}
}
- alignment：控制子视图的水平对齐方式，例如 .leading、.center 或 .trailing。
- spacing：设置子视图之间的垂直间距。
HStack（水平堆叠）
HStack 是一个水平布局容器，用于将子视图按顺序从左到右排列。每个视图按照它们被添加的顺序依次排列在前一个视图的右侧。
基本使用
import SwiftUI
struct ContentView: View {
var body: some View
HStack {
Text("First")
Text("Second")
Text("Third")
}
}
}
在这个例子中，HStack 会将三个文本视图按水平顺序排列在一起。
对齐和间距
与 VStack 类似，你可以通过设置 alignment 和 spacing 来调整 HStack 的对齐方式和视图之间的间距。
import SwiftUI
struct ContentView: View {
var body: some View {
HStack(alignment: .top, spacing: 30) {
Text("Top aligned")
Text("With more spacing")
Text("Even more text")
}
.padding()
}
}
- alignment：控制子视图的垂直对齐方式，例如 .top、.center 或 .bottom。
- spacing：设置子视图之间的水平间距。
ZStack（层叠布局）
ZStack 是一个层叠布局容器，用于将子视图叠加在一起。每个视图按照它们被添加的顺序依次叠加在前一个视图之上。
基本使用
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
Rectangle()
.fill(Color.blue)
.frame(width: 200, height: 200)
Text("On Top")
.foregroundColor(.white)
}
}
}
在这个例子中，ZStack 会先绘制一个蓝色的矩形，然后将文本视图叠加在其上。
对齐方式
你可以使用 alignment 参数来控制所有子视图在 ZStack 中的对齐方式。
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack(alignment: .bottomTrailing) {
Rectangle()
.fill(Color.green)
.frame(width: 200, height: 200)
Text("Bottom Right")
.padding()
.foregroundColor(.white)
.background(Color.black.opacity(0.7))
.cornerRadius(5)
}
}
}
- alignment：控制子视图在 ZStack 中的对齐方式，例如 .topLeading、.center 或 .bottomTrailing。
组合使用 VStack、HStack 和 ZStack
这三种布局容器可以组合使用，以构建更复杂的用户界面。
例子：复杂布局
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
HStack {
Text("Left")
Spacer()
Text("Right")
}
.padding()
ZStack {
Rectangle()
.fill(Color.orange)
.frame(height: 200)
Text("Overlay Text")
.foregroundColor(.white)
.font(.largeTitle)
.bold()
}
.padding()
HStack {
VStack {
Text("Column 1, Row 1")
Text("Column 1, Row 2")
}
Spacer()
VStack {
Text("Column 2, Row 1")
Text("Column 2, Row 2")
}
}
.padding()
}
}
}
在这个例子中，VStack 将所有内容垂直排列，其中包含了一个水平排列的 HStack 和一个带有覆盖文本的 ZStack，以及另一个 HStack 里面嵌套了两个垂直排列的 VStack。
小结：
- VStack：用于垂直排列子视图，从上到下。
- HStack：用于水平排列子视图，从左到右。
- ZStack：用于将子视图叠加在一起，形成层次关系。
- 对齐与间距：每个布局容器都有alignment和spacing参数，用于调整子视图的对齐方式和间距。
- 组合使用：可以将VStack、HStack和ZStack组合使用，构建复杂的布局。
通过掌握这三种布局方式，你可以在SwiftUI中创建各种不同的用户界面布局，灵活而高效地组织视图元素。
