Flutter中CustomPaint自定义绘制无法显示，寻求问题排查帮助

• 混淆CustomPaint与CustomPainter的职责
  很多人会直接继承CustomPaint并覆写其paint()方法，但这是错误用法。CustomPaint是Widget，它的paint()方法并非用于自定义绘制逻辑，真正负责绘制的是CustomPainter子类。正确实现方式：

  // 继承CustomPainter实现绘制逻辑
  class MyPainter extends CustomPainter {
    @override
    void paint(Canvas canvas, Size size) {
      // 示例：绘制红色填充矩形
      final paint = Paint()..color = Colors.red;
      canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
    }
  
    @override
    bool shouldRepaint(covariant CustomPainter oldDelegate) {
      return true; // 根据实际需求判断是否需要重绘，初始绘制需确保能触发
    }
  }
  
  // 在Widget树中使用CustomPaint并传入painter
  class MyCustomWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return CustomPaint(
        painter: MyPainter(),
        size: const Size(200, 200), // 必须设置尺寸，否则可能缩成0
      );
    }
  }
  

• 未给CustomPaint设置有效尺寸
  CustomPaint没有固有尺寸，如果父组件未提供约束（比如直接放在无约束的Center或Scaffold body中），它会被压缩到0x0大小，导致绘制内容不可见。解决方式：

  • 直接给CustomPaint设置size属性
  • 用SizedBox包裹并指定宽高：SizedBox(width: 200, height: 200, child: CustomPaint(painter: MyPainter()))
  • 放在带宽高约束的Container中

• 绘制颜色与背景色一致
  检查Paint对象的color属性，如果和父组件背景色相同，绘制内容会被完全覆盖。比如背景是白色时，用Colors.white绘制图形就看不到效果。

• 绘制坐标超出组件范围
  若绘制的图形坐标超出CustomPaint的尺寸范围，比如在200x200的组件中绘制中心在(300,300)的圆形，图形会完全处于组件外部，自然无法显示。确保绘制逻辑基于Size size参数的范围设计。

• shouldRepaint返回错误值
  如果CustomPainter依赖外部状态，但shouldRepaint始终返回false，状态变化时不会触发重绘。初始绘制通常不受影响，但动态更新后看不到内容时，需检查该方法的返回逻辑——当CustomPainter的参数或依赖状态变化时，应返回true。

• 错误使用foregroundPainter属性
  若将自定义CustomPainter传给foregroundPainter，且CustomPaint的child组件覆盖了绘制层，也会导致内容不可见。默认应使用painter属性，foregroundPainter仅用于绘制在child之上的内容。

内容的提问来源于stack exchange，提问作者Robot I123