第三章 界面落地：Widget 体系
第三章 · 界面落地
章节摘要：骨架已在第 2 章立好，本章把「轻记账」的界面真正画出来：两种 Widget 的分界线决定状态放在哪，布局系统的约束规则决定页面为什么不按你想的排，动画的两套工艺决定"动起来"花多少心思，主题系统决定同一份代码在 Android 与 iOS 上各自像谁，CustomPaint 决定统计图表不必求人。五节走完，你具备了独立写出整屏界面的能力。
学习目标
读完本章，你应当能够：
- 对任意一段界面状态，判断它该放 StatelessWidget 还是 StatefulWidget，并说明依据；
- 说出 State 的完整生命周期钩子各自该做什么、不该做什么，setState 的三条纪律；
- 用"约束向下、尺寸向上"预测 Row、Column、Expanded 的排布结果，并解掉"列表放进 Column 就报错"这类约束冲突；
- 为界面加动效时，在隐式动画与显式动画之间做正确选择，写出可暂停、可循环的 AnimationController；
- 用一套 ThemeData 统一轻记账的观感，并按平台切换 Material 与 Cupertino 的组件形态；
- 用 CustomPaint 亲手画一张消费分类占比图，理解 shouldRepaint 与重绘的对应关系。
核心概念速览
一句话立住本章：Flutter 的界面是"配置的组合"而不是"控件的调用"——想清楚每个状态归谁、每份约束给多少，界面自然落地。
子章节导航
03-1 两种 Widget 的分界线：状态放哪是界面工程的第一决策。本节给出判断标准与 State 生命周期钩子的完整用法，轻记账的记账输入框在此登场。
03-2 布局系统：约束向下、尺寸向上：Row 与 Column 的排班规则、Expanded 与 Flexible 的分配逻辑、无界约束的经典报错。本节的预测法能让你不看运行结果就指出布局对错。
03-3 动画两套工艺：隐式与显式：AnimatedContainer 一行生效的隐式动画，与 AnimationController 驱动的显式动画。账单删除时的位移动画作为贯穿案例。
03-4 一套观感、两端气质：ThemeData 的发号机制、明暗两套主题、Material 与 Cupertino 的按平台切换，以及哪些地方该"随平台"、哪些地方该"认品牌"。
03-5 CustomPaint：把数据画成图：统计页的分类占比图不引第三方库，用 Canvas 亲手画。Painter 的职责边界与重绘控制一并讲清。
子章节之间的逻辑关系
五节是"从结构到表皮"的递进：先定状态结构（03-1），再让结构有形状（03-2），形状能变化（03-3），变化有气质（03-4），最后特殊视觉自己动手（03-5）。它们依赖第 2 章的机制（生命周期建立在 Element 常驻之上，动画回调受事件循环调度），并为第 4 章铺路——界面写好了，交互状态与页面流转才有处安放。
[03-1 状态归属] ──结构定了──> [03-2 布局排布] ──形状定了──> [03-3 动画] │ [03-5 自定义绘制] <──表皮统一── [03-4 主题与双平台] <──气质定了──┘
前置知识与后续延伸
前置：第 2 章的三棵树（尤其"重建便宜、重排昂贵"与状态由 Element 持有两条）；不要求设计背景，视觉参数都给出现成值。
延伸：03-1 的状态归属判断将在第 4 章升级为全局状态管理选型；03-2 的约束知识是排查溢出条纹（黄黑斑马线）的唯一钥匙；03-4 的主题 token 化思路会在第 7 章多端发布时扩展出桌面端的字号与间距差异；03-5 画出的统计图将在第 6 章作为"重绘范围优化"的实测对象。建议每节读完就把对应屏写进自己的轻记账工程——本章的手感只能靠敲出来。