SwiftUI 入门实战

十三章动手路线：从「视图是值」到绘制与特效，把 SwiftUI 的机制一路打通；凡涉及尺寸与对齐的结论都附实测数字

6 分钟阅读

SwiftUI 入门实战：十三章打通声明式界面

这不是又一份"从 View 讲到 NavigationStack"的教程。你的 Swift 基础部分第七篇（第 40–47 章）已经把 SwiftUI 的概念铺完了，SwiftUI 官方文档整理则是一本按 API 分类的字典。
这一份走第三条路：只讲那些必须先想通的事，并且每讲一个规则，尽量给一个实测数字。

为什么是这些章

SwiftUI 的表面门槛极低——Text("你好") 就出字，半小时能做出能跑的界面。真正的门槛在下面这些事上，它们互相咬合，缺一个都会卡住：

章	一句话	不学会怎样
01 视图是值	`View` 是结构体，`body` 是计算属性	会把视图当控件去"改"，然后奇怪为什么改了没用
02 状态是源头	数据变了界面才会变，反过来不行	写出"列表点了不刷新"，然后卡三天
03 布局是一次谈判	父提尺寸 → 子报尺寸 → 父定位子	永远在靠猜加 `frame`，改一处崩三处
04 对齐与容器	对齐是"和谁对齐"，不是"往哪儿挪"	两个高度不同的图怎么都对不齐
05 动画的本质	动画是两个状态值之间的补间	写了 `.animation` 却不动，或者全都在乱动
06 手势与身份	手势改状态，身份决定视图是否被复用	拖拽卡顿、列表复用出错、动画莫名其妙
07 组件化	重复的修饰符/布局/交互，各抽成一种东西	同一个样式抄 30 遍，改一次漏三处
08 列表与导航	身份决定行状态属于谁；页面是一叠值	删一行后别的行状态串了；导航没法编程控制
09 数据落地	用 enum 建三态；I/O 别进视图	用三个布尔变量描述一件事，非法状态满天飞
10 性能与调试	`body` 调用次数不重要，里面干了什么才重要	凭直觉优化，改了半天没变快
11 可访问性与适配	字号、旁白、颜色、动效偏好都是需求	一部分用户根本用不了你的界面
12 绘制	`Shape` 描述路径，`Canvas` 批量绘制	系统没提供的图形就做不出来
13 视觉特效	材质、混合、`visualEffect` 的正确用法	自己 blur 冒充毛玻璃，又贵又不像

这一份的特别之处：数字都是量出来的

SwiftUI 是视觉框架，但"看起来是什么样"很难用嘴说清。所以本教程里凡是涉及尺寸、对齐、绘制的结论，都附了实测数字。

测量方法：在无窗口模式下加载视图（NSHostingController），然后用 GeometryReader 读取框架真实分配的尺寸和位置。

⚠️ 这里有个方法论教训值得单独说：最初我用"把视图渲染进位图、逐像素扫描色块边界"的办法，结果得出了错误结论——因为位图只能反映画布范围内的内容，一旦视图溢出容器，我就把"可见的那一段"当成了"实际尺寸"，于是误以为 SwiftUI 会压缩固定宽度的视图。改用 GeometryReader 读真实分配值之后才发现：它根本不压缩，是让内容溢出。

第 03 章那一节保留了这次纠错的完整记录，因为这个错误本身很有教学价值——它示范了"用一个会骗人的测量手段去验证结论"有多危险。

一部分结论我无法实测，正文里都标注了

无界面环境能做的事有边界。以下几类断言我明确标注了是"推导 / 文档化行为"而不是实测：

内容	位置	为什么测不了
列表身份选错会让行状态串位	第 08 章	需要真实的数据变更事件；每个 `NSHostingController` 都是独立的树
手势被系统取消时 `onEnded` 不触发	第 06 章	手势需要真实事件流（正文给了 SDK 里 `reset` 闭包的机制证据）
`.fixedSize()` 的确切效果	第 03 章	测出来的数字不稳定，所以不给数字
视觉效果的"好看程度"	第 12、13 章	需要人眼判断

💭 标出来比含糊过去好。你如果发现哪一处描述与你的实际结果不符，那很可能是这些地方——贴给我，我改。

学习基线

语言：Swift 6.4（本机工具链实测版本），示例按 Swift 6 语言模式（严格并发检查）编写。
框架版本：凡是较新的 API 都标注了最低系统要求（@Observable 与 visualEffect 是 iOS 17、glassEffect 是 iOS 26）。
运行方式：示例面向 Xcode + 预览。每章末尾的"完整可运行文件"是 View + #Preview，不含 @main——App 的入口（@main struct MyApp: App）在 Xcode 模板建的 App 文件里，让它的 WindowGroup 指向正文的主视图即可（见第 1 章 §1.6）。
命令行实验：少量"纯逻辑"示例可以用命令行直接验证，正文里用 🔬 标出：存成 t.swift，swiftc t.swift -o t && ./t（或 swift t.swift）。这些片段是顶层代码，不需要 @main；反过来，一旦加上 -parse-as-library（或改用多文件编译），就必须写 @main——两种入口写法互斥，用错哪个都会报错，对照表见第 1 章 §1.2。
代码约定：输出写在同一个代码块里用 // prints: 标注；⚠️ 易错点，🛑 编译错误示例，🚧 能编译但有代价，🔥 高频重点，🔬 实测，🔤 名词解释（第一次出现的术语在这里补定义），📦 运行方式提示。
术语：本教程默认你写过 Swift（结构体、协议、闭包、泛型），但 SwiftUI 特有的名词尽量在第一次出现处就地解释——比如"修饰符"在第 1 章 §1.1 补了定义。遇到没解释的词，直接告诉我。

和另外三份内容怎么配合

你在做什么	去哪一份
第一次学 SwiftUI，或者被布局/动画卡住了	本教程，按顺序读，第 3 章最值得慢读
想知道"这个东西的完整概念体系"	Swift 基础部分第七篇，第 40–47 章
查某个 API 的签名和用法	SwiftUI 官方文档整理
写 Swift 语法忘了怎么写	Swift 速查表
程序崩了、结果不对	Swift 血泪速查

十三章目录

第一幕：把模型立起来

第 1 章视图是值，不是控件 body 为什么会被反复调用、some View 到底藏了什么、视图树是怎么被差分的
第 2 章状态是唯一的事实来源 @State / @Binding / @Observable / @Environment 的选择判据，以及"不刷新"bug 的定位法

第二幕：布局（最容易劝退的部分）