flutter怎么画,flutter 画中画

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Flutter CustomPaint 使用介绍

CustomPaint class提供了让用户自定义widget的能力，它暴露了一个canvas，可以通过这个canvas来绘制widget，CustomPaint会先调用painter绘制背景，然后再绘制child，最后调用foregroundPainter来绘制前景，CustomPaint的定义如下

CustomPaint的绘制过程都将会交给CustomPainter来完成，CustomPainter是个抽象接口，在子类化CustomPainter的时候必须要重写它的 paint 跟 shouldRepaint 接口，可以根据自己的场景来选择性的重写 hitTest 跟 shouldRebuildSemantics 方法。

canvas--画布，真正的绘制是由canvas跟paint来完成的，画布提供了各种绘制的接口来绘制图形，除此以外画布还提供了平移、缩放、旋转等矩阵变换接口，画布都有固定大小跟形状，还可以使用画布提供的裁剪接口来裁剪画布的大小形状等等。

常用的绘制接口有更多请查看官方文档

Paint---笔画，是用来设置在画布上面绘制图形时的一些笔画属性，如：颜色、线宽、绘制模式、抗锯齿等等。常用属性有更多请查看官方文档

color ：设置画笔颜色

isAntiAlias ：设置画笔是否扛锯齿

shader : 着色器，填充形状或者画线时用到，如果没设置将会使用color

strokeWidth ：设置画笔画线宽度

style ：绘制模式，画线或充满

下面这个例子来自于官方，通过 CustomPaint 画出了一个蓝天跟太阳出来

效果如下：

相关问答

Q1: flutter页面的绘制和管理

Element管理Widget和RenderObject。

widget保持显示当前的页面状态，当widget产生点击等交互，调用setState()改变element中管理的state，

Q2: Flutter 56: 图解自定义 BubbleWidget 气泡插件

小菜在学习时需要用到气泡效果，为了更加灵活，小菜封装了一个简单的 flutter_bubble 气泡插件，方便日常的使用；

小菜准备用 Canvas 的 drawPath 进行绘制，主要分为三个部分，圆角弧线，普通直线，尖角折线，均可由 drawPath 自带方法绘制；小菜以前整理过关于 Canvas 绘制的小博客，实现很简单；

小菜绘制了一个简陋的原型图，整体黑框为 Bubble Widget 整体范围；蓝色圆弧为圆角位置；红色尖角可根据上下左右参数进行配置，且只可展示一个，尖角的高度和角度可自由配置，当确定一个尖角位置时，其余三个方向宽高延伸到黑框部分；而橙线则是连接圆角与尖角等直线；中间空余部分为子 Widget 位置； Tips: Child Widget 宽高小于等于 Bubble Widget ；

首先在边角处绘制四个圆弧，直接用 arcTo 即可，需要注意的是：小菜整体以 drawPath 方式实现，准备从左上角开始顺时针绘制，所以绘制圆弧时也是顺时针方向；

小菜理解， Rect 为绘制圆角的矩形，包括位置及大小； startAngele 为起始角度； sweepAngle 为绘制弧形角度；小菜需要的四个圆弧大小均为 pi/2 ，只需调整矩形位置与起始角度即可；

其次绘制尖角，小菜的尖角是由 lineTo 两段直线拼接起来的，只需要处理起点与终点即可；小菜为了更加灵活，可以设置尖角高度与尖角角度(0 ~ 180)，通过三角函数进行计算；

最后就是将处理好的连接起来，小菜为了适应更多场景，尖角位置也可自由配置，长度为到圆角的距离，默认为边框中间位置；

小菜将配置逻辑编辑好发布到 Pub 库，基本 BubbleWidget 便完成，简单分析一下可配置项；

自定义 Bubble Widget 是小菜发布的第二款 Pub 插件，还有很多不完善的地方，如有错误请多多指导！

Q3: Flutter自定义绘制组件

Flutter中自定义组件一般有两种方式：

CustomPaint继承自SingleChildRenderObjectWidget，即它可以在通过嵌套引入到widget树中，并且可以有一个child子widget。它的构造方法如下：

painter和foregroundPainter需要接收CustomPainter对象，是CustomPaint核心。CustomPainter是进行UI绘制的核心类，绘制时, CustomPaint 首先在画布上调用 painter绘制 , 然后再绘制它的 child Widget, child 绘制完成后再调用 foregroundPainter 进行绘制。

size属性标识绘制区域大小，但当CustomPaint有child，该属性将会忽略，而使用child的大小为绘制区域大小。

isComplex和willChange用于控制绘制层缓存处理的，这里暂不讨论。

可实现CustomPainter子类进行UI绘制

实现paint方法进行真正的绘制，canvas是画布对象，size是绘制区域，是从CustomPaint中size属性传递得到的。绘制过程与Android原生开发十分类似，连API都十分相像，这点对熟悉Android原生开发者真是太友好了。

Paint对象是画笔对象，就是绘图工具，我们可以设置画笔的颜色、粗细、是否抗锯齿、笔触形状以及作画风格等，通过这些属性我们可以很方便的来定制自己的UI效果，在绘制的过程中可以定义多个画笔，以便实现多种风格图形的集合。

根据需求选择合适的画笔属性，完成你的绘制。

Canvas是绘制的画布，它包含了很多绘制方法，可以绘制出各种形状的图形。需要注意的是，画布是应用所有控件都在使用的, 所以通过这个画布其实是可以绘制充满屏幕的内容的，每次绘制都应该限制在本控件的区域(Size)内, 以免绘制覆盖到其他组件。

下面介绍下Canvas的绘制方法：

PointMode是个枚举

p1、p2为线段两个端点

Rect定义矩形的大小位置，有多种构造方式:

RRect描述圆角矩形，他通过Rect和Radius来构造