Flutter CustomPaint 提供了一个 canvas,可以在绘制阶段在上面进行绘制内容。
需要绘制时,CustomPaint 首先要求它的 painter 在当前画布上绘画,然后它绘画它的 child,在绘画完它的 child 之后,要求他的 foregroundPainter 绘画。需要在从原点开始并包含给定大小的区域的矩形内作画。 (如果在这些边界之外绘画,则分配的内存可能不足以光栅化绘画命令,并且结果行为未定义。)要保证在这些边界内绘画,请考虑使用 ClipRect。
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 {@overridevoid 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);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return false;}
}
需要重写两个方法,在 paint 方法中进行绘制。如果绘制不受外界影响,shouldRepaint 返回 false 就好。
CustomPaint(painter: MyPainter(),);
把 MyPainter 赋值给参数 painter 就好了。
如果 CustomPaint 的约束可以为 0 的话,那么 size 的值 Size(0,0)
,就是说,size 的值总是 Constrains 的最小 width,最小 height。有两种办法可以改变 size。
1.可以给 CustomPaint 加上约束,比如加一个 SizedBox
SizedBox(height: 20,width: 20,child: CustomPaint(painter: MyPainter(),))
2.可以直接指定 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 参数才能起到作用。
是否提示应该缓存该层的绘画。如果 为false,则合成器将自己来决定这一层是否应该缓存。
是否应该告知缓存层这幅画在下一帧中可能会发生变化。如果 isComplex 为 true,才需要考虑这个参数。
默认绘制的层是在 child 之下,foregroundPainter 在 child 之上。
CustomPainter 有一个 可选的参数 Listenable? repaint
,是用来做动画的。
举个例子。
class MyPainter extends CustomPainter {MyPainter(Animation animation) :_animation=animation, super(repaint: animation);final Animation _animation;@overridevoid 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);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return false;}
}
class MyStatefulWidget extends StatefulWidget {const MyStatefulWidget({super.key});@overrideState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State with SingleTickerProviderStateMixin{
late AnimationController controller= AnimationController(duration: Duration(seconds: 2),vsync: this)..repeat();
@overrideWidget build(BuildContext context) {return SizedBox(height: 20,width: 20,child: CustomPaint(painter: MyPainter(controller.view),));}
}
会看到一条红色的直线由短变长。
整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。
有需要的小伙伴,可以点击下方卡片领取,无偿分享