Flutter 自定义绘制与 Canvas 深度解析 (Custom Painting)

---

前言

当内置 Widget 无法满足 UI 需求时——比如绘制折线图、仪表盘、签名画板、粒子效果——就需要走进 Flutter 的绘制层，直接操作 Canvas。

自定义绘制看似简单，但有两个常被忽视的性能陷阱：不合理的 shouldRepaint 和缺少 RepaintBoundary。本文将从 Canvas API 出发，深入到 Layer 合成原理，帮你真正用好自定义绘制。

---

一、CustomPainter 的基本结构

class MyPainter extends CustomPainter {
  final double progress;      // 绘制所需数据
  final Color color;

  MyPainter({required this.progress, required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    // 在这里进行所有绘制操作
    final paint = Paint()
      ..color = color
      ..strokeWidth = 4.0
      ..style = PaintingStyle.stroke;

    canvas.drawArc(
      Rect.fromLTWH(0, 0, size.width, size.height),
      -math.pi / 2,
      2 * math.pi * progress,
      false,
      paint,
    );
  }

  @override
  bool shouldRepaint(MyPainter oldDelegate) {
    // 只有数据变化时才重绘，关键性能优化
    return oldDelegate.progress != progress || oldDelegate.color != color;
  }
}

// 使用：
CustomPaint(
  painter: MyPainter(progress: 0.75, color: Colors.blue),
  size: const Size(200, 200),
)

---

二、Canvas API 全景图

2.1 基础图形

void paint(Canvas canvas, Size size) {
  final paint = Paint()..color = Colors.blue;

  // 矩形
  canvas.drawRect(
    Rect.fromLTWH(10, 10, 100, 50),
    paint,
  );

  // 圆角矩形
  canvas.drawRRect(
    RRect.fromRectAndRadius(
      Rect.fromLTWH(10, 80, 100, 50),
      const Radius.circular(12),
    ),
    paint,
  );

  // 圆形
  canvas.drawCircle(Offset(size.width / 2, size.height / 2), 40, paint);

  // 椭圆
  canvas.drawOval(Rect.fromLTWH(10, 160, 100, 60), paint);

  // 直线
  canvas.drawLine(Offset(0, 0), Offset(size.width, size.height), paint);
}