调试与性能优化:Inspector、DevTools 与 jank

使用 Flutter Inspector 分析 Widget 树,用性能工具定位掉帧、重建和耗时任务。

调试性能

先会看 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('加载中...'),

官方参考