Repaint 和 Rebuild 不是一回事

控制台里不断出现 build 日志，重绘提示又在闪，很容易得出结论：“Widget 重建了，所以整块页面一定重新绘制了。”这个判断经常把优化方向带偏。

核心结论：Rebuild 是 Element 重新执行 build 并协调 Widget 配置；Repaint 是 RenderObject 重新记录绘制内容。Rebuild 后不一定 Repaint，Repaint 也可以不经过 Rebuild。

两者分别在做什么

Widget 是不可变配置，Element 负责协调配置，RenderObject 负责布局与绘制。

Rebuild：Element 重新执行 build，用新 Widget 配置协调子 Element；
Repaint：RenderObject 重新执行 Paint 阶段并记录绘制命令；
Raster：后续把绘制内容栅格化为屏幕像素，不能和 Repaint 混为一谈。

一次常见更新大致是：

新 Widget 不代表 RenderObject 的有效属性一定变化；属性变化也可能只影响布局或绘制中的一部分。

Rebuild 后，为什么可能不 Repaint

setState 会让当前 State 对应的 Element 在后续构建阶段执行 build，但它不会直接调用 Paint。

下面的 _requestVersion 没有参与界面配置。点击后当前组件会 Rebuild，但返回的稳定子配置没有变化，因此没有理由仅因为这次状态变化就重绘它：

int _requestVersion = 0;
 
void retryRequest() {
  setState(() => _requestVersion++);
}
 
@override
Widget build(BuildContext context) {
  debugPrint('build version=$_requestVersion');
  return const ColoredBox(
    color: Color(0xFF00897B),
    child: SizedBox(width: 120, height: 48),
  );
}

真实业务中，父组件可能因其他状态重建，而某个子树的配置保持不变。“父组件执行了 build”不能推出“整个子树重新 Paint”。

如果颜色、阴影或文字内容变化，通常需要 Repaint；宽高、Padding 等几何属性变化还可能先触发 Relayout。

Repaint 也可以不经过 Rebuild

动画只改变绘制参数时，可以把 Animation 传给 CustomPainter 的 repaint。每次通知会直接请求重绘，不需要每个 Tick 都调用 setState：

class PulseIndicator extends StatefulWidget {
  const PulseIndicator({super.key});
 
  @override
  State<PulseIndicator> createState() => _PulseIndicatorState();
}
 
class _PulseIndicatorState extends State<PulseIndicator>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 800),
  )..repeat(reverse: true);
 
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: const Size.square(48),
      painter: PulsePainter(_controller),
    );
  }
}
 
class PulsePainter extends CustomPainter {
  PulsePainter(this.animation) : super(repaint: animation);
 
  final Animation<double> animation;
 
  @override
  void paint(Canvas canvas, Size size) {
    final radius = 8 + animation.value * 10;
    canvas.drawCircle(
      size.center(Offset.zero),
      radius,
      Paint()..color = const Color(0xFF00897B),
    );
  }
 
  @override
  bool shouldRepaint(covariant PulsePainter oldDelegate) {
    return animation != oldDelegate.animation;
  }
}