Flutter CustomPaint 提供了一个 canvas，可以在绘制阶段在上面进行绘制内容。
CustomPaint 介绍
需要绘制时，CustomPaint 首先要求它的 painter 在当前画布上绘画，然后它绘画它的 child，在绘画完它的 child 之后，要求他的 foregroundPainter 绘画。需要在从原点开始并包含给定大小的区域的矩形内作画。 （如果在这些边界之外绘画，则分配的内存可能不足以光栅化绘画命令，并且结果行为未定义。）要保证在这些边界内绘画，请考虑使用 ClipRect。
使用 CustomPaint
const CustomPaint({ super.key, this.painter, this.foregroundPainter, this.size = Size.zero, this.isComplex = false, this.willChange = false, super.child, }) 复制代码
最重要就是这个 painter，painter 需要自定义。
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 返回 false 就好。
CustomPaint(painter: MyPainter(),); 复制代码
把 MyPainter 赋值给参数 painter 就好了。
size 的大小。
如果 CustomPaint 的约束可以为 0 的话，那么 size 的值 Size(0,0)，就是说，size 的值总是 Constrains 的最小 width，最小 height。有两种办法可以改变 size。
- 可以给 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 参数可以在 constrains 的范围内起到作用。在本例中，约束为 20, size 为 30，最后传给 paint 方法的 size 为 20。 tight 约束下 size 参数无效，只有 在loose 约束下 ，size 参数才能起到作用。
isComplex
是否提示应该缓存该层的绘画。如果 为false，则合成器将自己来决定这一层是否应该缓存。
willChange
是否应该告知缓存层这幅画在下一帧中可能会发生变化。如果 isComplex 为 true，才需要考虑这个参数。
foregroundPainter
默认绘制的层是在 child 之下，foregroundPainter 在 child 之上。
动画
CustomPainter 有一个 可选的参数 Listenable? repaint ，是用来做动画的。
举个例子。
class MyPainter extends CustomPainter { MyPainter(Animation<double> animation) :_animation=animation, super(repaint: animation); final Animation<double> _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<MyStatefulWidget> createState() => _MyStatefulWidgetState(); } class _MyStatefulWidgetState extends State<MyStatefulWidget> 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), )); } } 复制代码
会看到一条红色的直线由短变长。
