Flutter CustomPaint绘制widget使用示例
CustomPaint 介绍
Flutter CustomPaint 提供了一个 canvas，可以在绘制阶段在上面进行绘制内容。
需要绘制时，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),
));
}
}
会看到一条红色的直线由短变长。
以上就是Flutter CustomPaint绘制widget使用示例的详细内容，更多关于Flutter CustomPaint绘制widget的资料请关注脚本之家其它相关文章！
相关文章
小编今天为大家带来一场淅淅沥沥的夜空之雨和满天飞舞的樱花之恋，希望能在炎炎夏日为您带来一丝清爽的凉意！学习iOS动画的小伙伴们可以参考学习。2016-08-08
这篇文章主要为大家详细介绍了iOS按比例实现方块图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要为大家详细介绍了iOS实现圆角箭头视图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了IOS 避免self循环引用的方法的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了iOS中关于模块化开发解决方案(纯干货)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要给大家介绍了关于iOS字体大小适配的3种方法，文中通过示例代码介绍的非常详细，对各位iOS开发者们具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
在开发中我们经常遇到这样的需求：在UITextField或者UITextView中限制用户可以输入的最大字符数。但在UITextView , UITextfield 中有很多坑，网上的方法也很多。但是并不是很全面吧，这里全面进行了总结，有需要的朋友们可以参考借鉴，下面跟着小编一起来学习学习吧。2016-11-11
这篇文章主要介绍了iOS 弹幕功能的实现思路图文详解，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
浅谈IOS中AFNetworking网络请求的get和post步骤
本篇文章主要介绍了浅谈IOS中AFNetworking网络请求的get和post步骤的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-02-02
这篇文章主要为大家详细介绍了iOS实现文件上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
最新评论