Flutter：解决CustomPainter在Material动画中重复调用paint的问题

算力阿峰

2026-8-3

解决CustomPainter在Material内置动画中不必要重复调用paint的问题

核心原因

Material内置动画（如BottomNavigationBarItem悬停、Drawer滑入）会触发父组件上下文的全局重绘请求，即便shouldRepaint返回false，CustomPaint仍会响应父级的重绘指令，导致paint被多次调用。

解决方案

用RepaintBoundary隔离绘制区域
将CustomPaint包裹在RepaintBoundary中，可使该区域的绘制与父级重绘完全隔离，只有当CustomPaint自身需要重绘时才会调用paint：
```
RepaintBoundary(
  child: CustomPaint(
    painter: MyCustomPainter(),
  ),
)
```

绑定静态Listenable避免无意义重绘
让CustomPainter继承时绑定一个不会变化的Listenable（比如AlwaysStoppedAnimation(0)），这样只有Listenable触发时才会重绘，彻底屏蔽父级动画的影响：

class MyCustomPainter extends CustomPainter {
  MyCustomPainter() : super(repaint: AlwaysStoppedAnimation(0));

  @override
  void paint(Canvas canvas, Size size) {
    // 你的绘制逻辑
  }

  @override
  bool shouldRepaint(covariant MyCustomPainter oldDelegate) => false;
}

避免父组件重建触发的重绘
如果父组件在动画过程中会触发setState重建，将CustomPaint封装到带const构造器的独立StatelessWidget中，确保父组件重建时不会重新创建CustomPaint实例：
```
class StaticPainterWidget extends StatelessWidget {
  const StaticPainterWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MyCustomPainter(),
    );
  }
}
```
在父组件中使用const StaticPainterWidget()即可。