Flutter中为CustomPaint添加边框的更优方案及性能疑问

一、更简便的CustomPaint添加边框方法 #

不需要嵌套第二个CustomPaint，直接在同一个CustomPainter的paint方法里，用两个Paint对象分别绘制边框和填充形状即可，步骤如下：

1. 定义两个Paint：一个负责填充主体颜色，一个负责描边边框
2. 先绘制边框（使用PaintingStyle.stroke），再绘制填充形状（使用PaintingStyle.fill），填充会覆盖边框的内部区域，只保留外部的边框效果

修改后的代码示例：

// 在CustomPainter的paint方法中
final Path targetPath = Path.combine(
  PathOperation.intersect,
  Path()
    ..addRRect(RRect.fromLTRBR(
        xCanvasLeft,
        xCanvasTop,
        xCanvasRight,
        xCanvasBot,
        const Radius.circular(canvasRadius))),
  Path()
    ..addOval(Rect.fromCircle(
        center: Offset(xHole, yHoleTop),
        radius: holeRadius))
    ..addOval(Rect.fromCircle(
        center: Offset(xHole, yHoleBot),
        radius: holeRadius))
    ..close(),
);

// 边框Paint，可自行调整宽度和颜色
final borderPaint = Paint()
  ..color = Colors.white
  ..style = PaintingStyle.stroke
  ..strokeWidth = 3.0;

// 主体填充Paint
final fillPaint = Paint()..color = Colors.blue;

// 先画边框，再画主体填充
canvas.drawPath(targetPath, borderPaint);
canvas.drawPath(targetPath, fillPaint);

如果需要边框完全在形状外部（避免strokeWidth一半在内部的情况），可以通过Path的偏移或路径度量生成新的边框路径，但大多数场景下上述方法足够简洁高效。

二、CustomPaint的资源消耗情况 #

CustomPaint的资源消耗取决于绘制逻辑的复杂度，核心要点：

• CPU开销：每帧重绘时都会执行paint方法内的代码，如果在paint里频繁创建复杂Path、做大量计算，会占用较多CPU资源，可能导致帧率下降。
• 重绘触发：如果shouldRepaint方法实现不当（比如总是返回true），会导致组件无意义地频繁重绘，额外增加消耗。
• 对比原生组件：相比Flutter自带的Container、ShapeDecoration等封装好的组件，CustomPaint更灵活，但因为是底层绘制操作，复杂场景下消耗会更高。

优化建议： #

• 缓存Path对象：不要在paint方法里每次都生成Path，而是在CustomPainter的构造函数或组件的initState中生成，仅当依赖参数变化时重新生成。
• 正确实现shouldRepaint：只有当CustomPainter的依赖属性（比如尺寸、颜色、半径等）真正变化时，才返回true，避免不必要的重绘。
• 减少绘制操作：尽量合并重复的绘制逻辑，避免在paint里做循环、复杂计算等耗时操作。
• 使用RepaintBoundary：如果CustomPaint是页面的一部分，用RepaintBoundary包裹它，限制重绘范围，避免页面其他部分刷新时带动它一起重绘。

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