学习笔记

SwiftUI 布局系统理解

布局三步流程

SwiftUI 的布局系统遵循一个清晰的三步流程，理解这个流程是写出高效界面的关键：

• 第一步：父视图提出尺寸建议 — 父视图告诉子视图"你最多可以有多大"
• 第二步：子视图确定自身尺寸 — 子视图根据建议和自己的内容，决定实际大小
• 第三步：父视图放置子视图 — 父视图根据子视图的尺寸，决定它在坐标系中的位置

常见布局容器

VStack 和 HStack 是最基础的布局容器。它们会尽可能给子视图分配空间，同时尊重子视图的理想尺寸：

VStack(alignment: .leading, spacing: 12) {
    Text("标题").font(.headline)
    Text("描述内容").font(.subheadline)
}

frame 的作用

.frame() 修改器可以在布局流程中施加约束。它不是直接设置大小，而是在父视图提出建议之前或之后介入：

Text("固定宽度")
    .frame(width: 200) // 强制宽度为 200

Text("最小宽度")
    .frame(minWidth: 100, maxWidth: .infinity) // 至少 100，可伸展

Spacer 和 Divider

Spacer 会尽可能占据剩余空间，常用于将内容推到边缘。Divider 是一条分隔线，在 VStack 中是水平的，在 HStack 中是垂直的。

小结

• 布局是父视图和子视图之间的协商过程
• .frame() 是约束工具，不是直接设置尺寸
• GeometryReader 可以获取实际可用空间，但应谨慎使用
• 优先使用 VStack/HStack/ZStack 组合，避免过度嵌套