悬停FAB时CustomPaint意外重绘的原因咨询

核心原因 #

1. Material组件触发父组件重建：FAB、ElevatedButton这类Material内置组件在悬停时，会触发上层Material相关的InheritedWidget状态更新，导致你的HomePage组件重建（可通过debugPrint('HomePage rebuild')验证，悬停时该日志会打印）。
2. CustomPainter实例重复创建：每次HomePage重建时，都会新建PanelBackend和PanelFrontend实例并传递给CustomPaint。尽管你在shouldRepaint中判断了toggle值未变化，但由于CustomPaint的painter/foregroundPainter引用发生了变化，Flutter会触发重绘逻辑。
3. GestureDetector无额外状态依赖：GestureDetector是基础无状态组件，悬停时不会触发任何上层组件重建，因此CustomPaint的painter实例不会更新，也就不会触发重绘。

解决方案 #

使用useMemoized缓存CustomPainter实例，确保只有当toggle值变化时才创建新的实例，避免父组件重建时重复生成painter对象：

修改HomePage的build方法：

@override
Widget build(BuildContext context) {
  final toggle = useState(false);

  // 缓存painter实例，仅依赖toggle变化时重建
  final backendPainter = useMemoized(() => PanelBackend(Colors.red, toggle), [toggle]);
  final frontendPainter = useMemoized(() => PanelFrontend(Colors.blue.withOpacity(1), toggle), [toggle]);

  debugPrint('HomePage rebuild');

  return Scaffold(
    body: Center(
      child: Container(
        height: 250,
        width: 250,
        child: CustomPaint(
          painter: backendPainter,
          foregroundPainter: frontendPainter,
          child: Container(
            height: 100.0,
            width: 100.0,
            color: Colors.transparent,
            child: const Text('Middle'),
          ),
        ),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () => toggle.value = !toggle.value,
      child: const Icon(Icons.add),
    ),
  );
}

额外优化 #

可以完善CustomPainter的shouldRepaint方法，同时对比颜色属性，确保只有当实际需要重绘的参数变化时才返回true：

// PanelBackend的shouldRepaint
@override
bool shouldRepaint(covariant PanelBackend oldDelegate) {
  return color != oldDelegate.color || notifier.value != oldDelegate.notifier.value;
}

// PanelFrontend的shouldRepaint
@override
bool shouldRepaint(covariant PanelFrontend oldDelegate) {
  return color != oldDelegate.color || notifier.value != oldDelegate.notifier.value;
}

内容的提问来源于stack exchange，提问作者max.back