Flutter CustomPaint绘制widget使用示例

目录
  • CustomPaint 介绍
  • 使用 CustomPaint
    • size 的大小。
    • isComplex
    • willChange
    • foregroundPainter
  • 动画

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的资料请关注我们其它相关文章!

(0)

相关推荐

  • Flutter绘制3.4边形及多边形渐变动画实现示例

    目录 正文 绘制3.4边形 整数边形的绘制 分数边形的绘制 具体代码 效果改进1 效果改进2 正文 项目被优化了,人也跟着被优化了,正好趁这一个月整理整理关于flutter的一些东西. 绘制3.4边形 先看一下效果图: 起因是上上上上上个月浏览flutter的canvas相关内容时,点进去一个网站,看到一个让我眼前一亮的动效: 作者用的代码是swift的,我没细看,不过他文章里的一句话让我醍醐灌顶: That is, we want the shape be asked to draw mult

  • Flutter 绘制风车实现示例详解

    目录 前言展示 1. 风车 1 的绘制 2. 风车 2 的绘制 3. 旋转动画的处理 4. 旋转动画的圈数 前言展示 最近源码看得比较多,本文来画点东西调节下心情,本绘制已收录于 FlutterUnit 的绘制集录,本文源码可参见[windmill.dart] .绘制内容非常简单,如下所示,两个样式的小风车:通过这两个小例子,可以学到: 路径的使用 画板的旋转变换 动画曲线与 Tween 的使用 风车1 风车2 1. 风车 1 的绘制 第一个风车非常简单,由四个 半圆 组成,每个部分直接的关系是

  • Flutter绘图组件之CustomPaint使用详解

    目录 简介 CustomPaint介绍 CustomPainter示例 总结 简介 在有些场景中,我们会需要绘制一些高度定制化的组件,比如 UI 设计师给我们出了个难题 —— 弄一个奇形怪状的边框.看在 UI 设计师是一个漂亮小姐姐的份上,又不好意思说这个做不了(那样也很没面子).这个时候我们就不能直接使用 Flutter 自带的那些组件了,而是需要手动绘制组件,那就会需要用到 CuntomPaint 组件.CustomPaint 组件和前端的 Canvas差不多,允许我们在一个画布上绘制各种元

  • Android Flutter利用CustomPaint绘制基本图形详解

    目录 绘制矩形 绘制圆形 绘制椭圆 绘制任意形状 绘制弧形 总结 上一篇我们介绍了 CustomPaint 的基本概念和使用,可以看到 CustomPaint 其实和 前端的 Canvas基本上是一样的,实际上前端 Canvas 支持的绘制方法 CustomPaint 都支持,毕竟 CustomPaint 其实也是基于 Canvas 实现的.本篇我们来介绍 CustomPaint 基本图形的绘制. 绘制矩形 绘制矩形比较简单,方法定义如下: void drawRect(Rect rect, Pa

  • Flutter CustomPaint自定义绘画示例详解

    目录 正文 CustomPaint 介绍 绘制点 PointMode3种模式 绘制线 和路径 绘制五子棋 总结 正文 CustomPaint是Flutter中用于自由绘制的一个widget,它与android原生的绘制规则基本一致,以当前Canves(画布)的左上角为原点进行绘制.在有些场景中,我们会需要绘制一些高度定制化的组件,比如 UI 设计师给我们出了个难题 —— 弄一个奇形怪状的边框.这个时候我们就不能直接使用 Flutter 自带的那些组件了,而是需要手动绘制组件,那就会需要用到 Cu

  • 用Flutter做桌上弹球(绘图(Canvas&CustomPaint)API)

    本文是Flutter中Canvas和CustomPaint API的使用实例. 首先看一下我们要实现的效果: 结合动图演示,列出最终目标如下: 在程序运行后,显示一个小球: 每次程序启动后,小球的样式均发生随机性变化,体现在大小.颜色和位置三点: 小球运行的规律参考桌球或三维弹球游戏: 单击屏幕,小球变色: 双击屏幕,小球暂停/恢复运动: 长按屏幕,小球开始/停止自动变色. 运用的主要技术点:Canvas和CustomPaint API. 运行平台:Android.iOS 源码地址: Githu

  • Android利用Flutter path绘制粽子的示例代码

    目录 前言 绘制 基本轮廓 粽叶 嘴巴 眼睛 腮红 手&脚 头巾 咸甜是一家 发声 动画控制嘴巴开合 用到的技术点 总结 前言 大家好,端午将至,首先提前祝小伙伴端午安康,端午作为中华民族的非常重要的传统节日,粽子那是必不可少的,但是你真的知道粽子的历史吗? 今天跟随本篇文章用Flutter path画一个会科普节日的的粽子吧- 绘制 基本轮廓 首先我们需要将粽子的基本轮廓绘制出来,通过图片可以看到粽子的轮廓是一个圆圆的三角形状, 本篇文章所有的图形都是用纯Path路径制作,这里我们可以将粽子的

  • Flutter手势密码的实现示例(附demo)

    目录 前言 开始 绘制圆点 绘制手势路径 组合9个圆点盘和手势路径 手势密码组件的使用 上传自定义组件到pub仓库 后记 前言 本篇记录的是使用Flutter完成手势密码的功能,大致效果如下图所示: 该手势密码的功能比较简单,下面会详细记录实现的过程,另外还会简单说明如何将该手势密码作为插件发布到pub仓库. 开始 实现上面的手势密码并不难,大致可以拆分成如下几部分来完成: 绘制9个圆点 绘制手指滑动的线路 合并以上两个部分 绘制圆点 我们使用面向对象的方式来处理9个圆点的绘制,每个圆点作为一个

  • Android Flutter实现点赞效果的示例代码

    目录 前言 绘制小手 完整源码 前言 点赞这个动作不得不说在社交.短视频等App中实在是太常见了,当用户手指按下去的那一刻,给用户一个好的反馈效果也是非常重要的,这样用户点起赞来才会有一种强烈的我点了赞的效果,那么今天我们就用Flutter实现一个掘金App上的点赞效果. 首先我们看下掘金App的点赞组成部分,有一个小手,点赞数字.点赞气泡效果,还有一个震动反馈,接下来我们一步一步实现. 知识点:绘制.动画.震动反馈 绘制小手 这里我们使用Flutter的Icon图标中的点赞小手,Icons图标

  • Android Flutter实现"斑马纹"背景的示例代码

    目录 最终效果图 实现思维 斑马纹(45°角,向左倾斜) 画笔 斑马纹坐标位置计算 圆角裁剪(如果需要) 作为背景 代码 使用处 main_page.dart 斑马纹具体实现类 zebra_stripes_back.dart 计算过程解释 由于工作中项目需求,需要将H5转换为Flutter代码. 其中的斑马纹背景需要根据接口返回的颜色来渲染,所以不能只是图片形式,无法通过decoration属性配置图片背景板. 楼主这边想到的方法就是通过 实现一个canvas绘制斑马纹类.使用Stack布局,将

  • Flutter开发之Widget自定义总结

    前言 在Flutter实际开发中,大家可能会遇到flutter框架中提供的widget达不到我们想要的效果,这时就需要我们去自定义widget,从Flutter构建.布局.绘制三部曲中我们了解到,实际的测量.布局.绘制操作都在RenderObject中,我们是可以进行继承相关的RenderObject来实现自定义的.但是其实flutter框架在设计之初就给我们预留出了自定义的入口,方便我们进行自定义. CustomPaint自定义绘制 例:圆形进度条 思路:使用CustomPaint绘制需要的效

  • 详解Flutter如何绘制曲线,折线图及波浪动效

    目录 正弦曲线绘制 波浪动效 曲线绘制 折线图 其他说明 总结 简介 上一篇用 Flutter 的 Canvas 画点有趣的图形我们介绍了使用 CustomPaint 绘制自定义形状,可以看到有了图形的平面绘制数学计算方法,我们可以画出所需的形状.本篇我们来介绍线条类图形的绘制,并且结合 Animation 实现了常见的波浪动效.通过本篇,你可以了解到: 正弦曲线的绘制 利用两条正弦曲线加上 Animation 实现波浪动效 曲线的一般绘制方法 折线图绘制 下面是最终实现的效果图,接下来我们一项

  • Android Flutter制作交错动画的示例代码

    目录 前言 动画解析 编码实现 总结 前言 之前一篇我们讲了 Flutter组合动画实现的方式 —— 交错动画.借助 GIF 和绘图技巧是可以做到类似 GIF 那种效果的.本篇我们来一个应用实例,我们让轮子在草地滚动着前进,而且还能粘上“绿色的草”,运行效果如下动画所示. 动画解析 上面实现的效果实际上由三个动画组成: 轮子前进的动画 轮子滚动 轮子的边缘颜色渐变(由黑色变成绿色) 这三个动画是同时进行的,因此需要使用到交错动画,即使用一个 AnimationController来控制三个 Tw

  • Flutter之 ListView组件使用示例详解

    目录 ListView的默认构造函数定义 默认构造函数 ListView.builder ListView.separated 固定高度列表 ListView 原理 实例:无限加载列表 添加固定列表头 总结 ListView的默认构造函数定义 ListView是最常用的可滚动组件之一,它可以沿一个方向线性排布所有子组件,并且它也支持列表项懒加载(在需要时才会创建).我们看看ListView的默认构造函数定义: ListView({ ... //可滚动widget公共参数 Axis scrollD

随机推荐

其他