开发者

Flutter CustomPaint绘制widget使用示例

开发者 https://www.devze.com 2022-12-13 10:17 出处:网络 作者: IAM17
目录CustomPaint 介绍使用 CustomPaintsize 的大小。isComplexwillChangeforegroundPainter动画CustomPaint 介绍
目录
  • CustomPaint 介绍
  • 使用 CustomPaint
    • size 的大小。
    • isComplex
    • willChange
    • foregroundPainter
  • 动画

    CustomPaint 介绍

    Flutter CustomPaint 提供了一个 canvas,可以在绘制阶段在上面进行绘制内容。

    需要绘制时,CustomPaint 首先要求它的 painter 在当前画布上绘画,然后它绘画它的 child,在绘画完它的 child 之后,要求他的 foregroundPainter 绘画。

    需要在从原点开始并包含给定大http://www.devze.com小的区域的矩形内作画。 (如果在这些边界之外绘画,则分配的内存可能不足以光栅化绘画命令,并且结果行为未定义。)要保证在这些边界内绘画,请考虑使用 ClipRect。

    使用 CustomPaint

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

    rwtddHVKmT重要就是这个 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),
            OffserwtddHVKmTt(
              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)php {
        return false;
      }
    }
    class MyStatefulWidget extends StatefulWidget {
      co开发者_开发学习nst 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的资料请关注我们其它相关文章!

    0

    精彩评论

    暂无评论...
    验证码 换一张
    取 消

    关注公众号