前言
通过之前的章节，可以了解到简单的 Swift 语言编程 和基于 Swift UI 的项目创建。有了这些基础知识，就可以开始了解具体的项目开发了。
Swift UI 布局
之前的章节中，创建好了一个 iOS App 项目，项目中给出了一个模板代码------一个简单的 Hello World 的 App 页面。
具体代码为
swift
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
}
.padding()
}
}
#Preview { // 通过设个代码，可以再右侧看到当前的预览
ContentView()
}这里面，出现了 SwiftUI 最核心的布局容器和视图修饰符。
这段简单的代码，包含了 SwiftUI 布局的底层逻辑：所有界面都是由「容器 + 子视图 + 修饰符」组合而成，容器负责排列视图，修饰符负责美化视图。
核心布局容器
SwiftUI 中核心的基础布局容器是三大栈容器 ，分别为：VStack、HStack、ZStack。接下来进行详细介绍。
1. VStack 垂直栈
正如我们看到的预览一样，这里使用了 VStack ，它的作用是内部的子视图垂直从上到下排列。这也是最常见的布局排列方式。这里可以看到，代码中，图片和文字就是上下排列的。
2. HStack 水平栈
HStack 的作用是将内部的子视图水平从左到右 排列，修改示例代码的布局代码为 HStack。
swift
HStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
}可以看到预览的页面样式已经发生了改变，图片在左侧，文字在右侧。变为了横向排列。
3. ZStack 层叠栈
ZStack 的作用为，让子视图层叠叠加，后写的视图覆盖在先写的视图之上。通常可以用作背景、图标叠加、文字覆盖图片等效果。
这里修改代码，使用ZStack方式。
swift
ZStack {
Circle()
.fill(Color.blue.opacity(0.2))
.frame(width: 100, height: 100)
VStack {
Image(systemName: "globe")
Text("Hello")
}
}这里，创建了一个圆，作为展示内容的背景，效果如下。
容器的参数
上一部分了解了 iOS App 界面是由不同容器嵌套构成的，这一点很像 HTML 的不同元素的嵌套，只不过声明的方式不太一样。同样的在 Swift UI 中，对于这些容器，也是由参数可以控制很多内容。
刚刚了解到的容器中，通常都支持两个关键参数：alignment（对齐方式）和 spacing（子视图间距），这也是调整布局的核心工具。
1. spacing：统一设置子视图间距
模板代码中图片和文字是紧贴的，添加 spacing 可以拉开距离：
swift
// 垂直排列，子视图间距 20
VStack(spacing: 20) {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
.font(.title) // 字体放大
}
.padding()效果如下，可以看出区别，两个元素的距离和之前不一样了。
2. alignment：设置对齐方式
- VStack 常用对齐：
.leading（左对齐）、.center（居中，默认）、.trailing（右对齐） - HStack 常用对齐：
.top（顶部对齐）、.center、.bottom（底部对齐）
再次修改示例代码，改成全部展示文字，使用左对齐的垂直布局
swift
VStack(alignment: .leading, spacing: 15) {
Text("标题")
.font(.headline)
Text("这是一段说明文字，演示左对齐效果")
.font(.subheadline)
}
.padding()可以看到效果，文字现在是作对齐的。
视图修饰符
从模板代码中，可以看到，.imageScale、.foregroundStyle、.padding 都是修饰符 ，作用是修改视图的样式、尺寸、位置。在 SwiftUI 中，修饰符是可以通过链式调用的，这是一种设计模式可以实现的，不过这里调用的顺序会影响最终效果，这里可以先结合之前见到过的了解一些最常用的几个：
1. padding：内边距
给视图添加四周的空白间距，让界面不拥挤：
swift
Text("Hello")
.padding() // 四周默认间距
.padding(.top, 20) // 单独给顶部加间距2. frame：设置尺寸
强制设置视图的宽度、高度：
swift
Image(systemName: "globe")
.frame(width: 50, height: 50) // 固定图片大小3. foregroundStyle：前景色
修改文字、图标颜色：
swift
.foregroundStyle(.red) // 红色
.foregroundStyle(Color.blue) // 蓝色4. font：设置字体
swift
Text("Hello")
.font(.title) // 标题字体
.font(.system(size: 24, weight: .bold)) // 自定义大小、加粗四、完整实战：优化 Hello World 页面
把之前了解到的布局知识整合起来，改造模板代码，做出一个更美观的页面：
swift
import SwiftUI
struct ContentView: View {
var body: some View {
// 垂直容器：居中、间距20
VStack(spacing: 20) {
// 图标
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.blue)
.font(.system(size: 60)) // 放大图标
// 主标题
Text("Hello, SwiftUI!")
.font(.title)
.fontWeight(.bold)
// 副标题
Text("这是我的第一个SwiftUI布局页面")
.font(.subheadline)
.foregroundColor(.gray)
}
// 整个容器添加内边距
.padding()
// 设置最大宽度，适配屏幕
.frame(maxWidth: .infinity, maxHeight: .infinity)
// 背景色
.background(Color(.systemGray6))
}
}
#Preview {
ContentView()
}运行预览后，会得到一个居中、有间距、有层级、配色舒适 的标准页面，这就是 SwiftUI 布局的魅力 ------用极少的代码，实现清晰、灵活的界面。
