先会看 Widget 树
Flutter Inspector 可以查看当前页面的 Widget 层级、布局约束、Padding、Align 等信息。遇到居中失败、溢出、空白区域时,不要只靠猜,先打开 Inspector 看结构。
性能优化方向
- 减少不必要的重建:把大 build 拆成小组件,能 const 的尽量 const。
- 列表使用 builder,避免一次构建大量子项。
- 图片控制尺寸和缓存,避免超大图直接渲染。
- 耗时 JSON 解析或计算放到 isolate,避免阻塞 UI。
- 动画卡顿时看 frame chart,定位 build、layout、paint 哪个阶段耗时。
jank 是什么
界面需要稳定输出帧率。以 60fps 为目标时,每帧大约只有 16ms。如果某一帧工作明显超时,就会出现肉眼可见的卡顿。网络请求本身不一定卡 UI,但主线程上大量解析 JSON、同步计算、大图片解码就可能导致掉帧。
// 小技巧:能提前确定不变的 Widget,尽量加 const
const SizedBox(height: 12),
const Text('加载中...'),