---

前言

使用Flutter做界面时，有时会需要需要自绘的控件，比如异形按钮或者显示视频，我们通常可以用CustomPainter实现。但是CustomPainter是一个抽象类，需要继承并实现绘制方法，才能进行绘制。本文对CustomPainter进行了一个简单的封装，简化绘制操作。

---

一、为何简化？

1、通常做法

继承CustomPainter，并在paint中实现绘制。

（1）、绘制形状1

my_custom_painter_ellipse.dart

（2）、绘制形状2

my_custom_painter_triangle.dart

CustomPaint中指定继承的CustomPainter

（3）、界面显示

page.dart

2、简化

有时候我们并不需要复杂的绘制，只是需要简单绘制一个图像或者填充颜色、或者测试图像混合，每次都需要新建一个文件，并继承实现一个类，是比较麻烦的，如果我们将paint变成一个回调方法，在控件build中直接编写绘制代码，那事情就方便很多了。
page2.dart

---

二、完整代码

simple_painter.dart

/// 创建人：  xin
/// 创建时间: 2024/5/1 11:34
/// 注释：    辅助绘制，直接通过参数传方法绘制
class SimplePainter extends CustomPainter {final void Function(Canvas canvas, Size size) onPaint;final bool Function(CustomPainter oldDelegate)? onShouldRepaint;const SimplePainter({required this.onPaint,this.onShouldRepaint,super.repaint,});@overridevoid paint(Canvas canvas, Size size) {onPaint(canvas, size);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return onShouldRepaint?.call(oldDelegate) ?? true;}
}

---

三、使用示例

1、绘制图形

class Page2 extends StatelessWidget {const Page2({super.key});@overrideWidget build(BuildContext context) {return Row(children: [CustomPaint(//绘制矩形painter: SimplePainter(onPaint: (Canvas canvas, Size size) {final paint = Paint();paint.color = Colors.black38;canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);}),),],);}
}

2、动态触发绘制

class Page2 extends StatelessWidget {final ChangeNotifier _notifier = ChangeNotifier();Page2({super.key});@overrideWidget build(BuildContext context) {return Row(children: [CustomPaint(//绘制矩形painter: SimplePainter(repaint: _notifier,onPaint: (Canvas canvas, Size size) {final paint = Paint();paint.color = Colors.black38;canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);}),),],);}//调用方法触发局部重绘，void trigglePaint() {_notifier.notifyListeners();}
}

---

总结

以上就是今天要讲的内容，本文实现SimplePainter主要目的还是在于方便使用，尤其是写测试代码需要验证某些功能时，新建类并继承是比较繁琐的，而且那种方式也是比较“重”的，本文提供方式则轻量很多且灵活性也比较大，即可以在buid中直接绘制，也可以把绘制封装在方法中再调用，又或者封装在类中在调用。