Flutter CustomPaint绘制组件使用实例教程

CustomPaint 介绍

Flutter 的 CustomPaint 组件本质上是一个画布（Canvas）容器，开发者在绘制阶段能够自由地在其中创作。简而言之，要实现自定义图形、线条乃至复杂图表，CustomPaint 是不可或缺的工具。

CustomPaint 的工作流程十分明确：首先由 painter 在画布上绘制底层内容，随后渲染 child（若存在），最后由 foregroundPainter 在 child 之上绘制前景层。整个层级结构清晰明了——底层、中层、上层。

需注意，绘制区域以原点为起点，其大小由传入的尺寸决定。若绘制超出边界，系统可能无法正确光栅化，导致未定义行为。为安全起见，建议使用 ClipRect 限制绘图范围。

使用 CustomPaint

const CustomPaint({
    super.key,
    this.painter,
    this.foregroundPainter,
    this.size = Size.zero,
    this.isComplex = false,
    this.willChange = false,
    super.child,
  }) 

核心参数为 painter，需要开发者自行实现一个自定义绘制器（CustomPainter）。

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0;
    canvas.drawLine(
        Offset(0, 10),
        Offset(
          100,
          10,
        ),
        paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

必须重写两个方法：paint 方法编写绘图逻辑，shouldRepaint 方法告知 Flutter 是否需要重新绘制。如果绘制内容不受外部状态变化影响，直接返回 false 即可。

CustomPaint(painter: MyPainter(),);

将 MyPainter 实例传递给 painter 参数，即可完成绘制。

size 的大小

若 CustomPaint 的约束允许缩小到 0，其 size 将变为 Size(0,0)。也就是说，它会取约束的最小宽度和最小高度。修改尺寸有两种方法：

• 在 CustomPaint 外部包裹一个约束容器，例如 SizedBox

 SizedBox(
        height: 20,
        width: 20,
        child: CustomPaint(
          painter: MyPainter(),
      ))

• 直接设置 size 参数

 SizedBox(
        height: 20,
        width: 20,
        child: CustomPaint(
          size:Size(30,30),
          painter: MyPainter(),
      ))

size 参数仅在约束范围内生效。上述示例中约束为 20，设置的 size 为 30，最终传递给 paint 的尺寸仍为 20。在 tight（紧）约束下 size 参数无效，只有 loose（松）约束下才能发挥作用。

isComplex

该参数告知渲染引擎：当前层绘制是否较为复杂，是否建议缓存。若设为 false，合成器将自行判断是否需要缓存。

willChange

当 isComplex 为 true 时，需关注 willChange 参数——它提示缓存层：下一帧画面可能发生变化。这样引擎可以提前进行优化。

foregroundPainter

默认的 painter 绘制在 child 之下，foregroundPainter 则绘制在 child 之上。一个负责背景，一个负责前景，层次分明。

动画

CustomPainter 还提供一个可选参数 Listenable? repaint，专门用于动画场景。示例如下：

class MyPainter extends CustomPainter {
  MyPainter(Animation animation) :_animation=animation, super(repaint: animation);
  final Animation _animation;
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0;
    canvas.drawLine(
        Offset(0, 10),
        Offset(
          100*_animation.value,
          10,
        ),
        paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});
  @override
  State createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State with SingleTickerProviderStateMixin{
 late AnimationController controller= 
      AnimationController(duration: Duration(seconds: 2),vsync: this)..repeat();
  @override
  Widget build(BuildContext context) {
    return SizedBox(
        height: 20,
        width: 20,
        child: CustomPaint(
          painter: MyPainter(controller.view),
        ));
  }
}

运行后，您将看到一条红色直线从短逐渐变长，这便是动画驱动绘制的效果。