Flutter中的自定义View的基本流程和相关知识

前言

我们都知道官方有很多的Widget供我们使用，但它提供的再多，也无法满足产品和UI的需求，
当然，谷歌官方也肯定想到了这一点，所以在flutter中，也是支持自定义View的。

在Flutter中与绘制相关的是在Painting层次，具体见下图：

这张Flutter架构图我相信大家肯定在不同的文章中见过很多次了。

和Flutter自带的Wdiget一样，自定义的Widget也会经过Skia被编译成原生代码，所以性能上也是不受影响的。

自定义View的流程

1. 新建类继承于CustomPainter实现paint（）和shouldRepaint（）方法
2. 在paint方法中绘制你想要的内容
3. 借助于 CustomPaint Widget来构建自己的Widget

当然，上面仅仅是自定义的流程，具体的实现还是有很多细节需要处理的。

与绘制相关的知识

学过前端或者终端开发的童鞋，应该对绘制都比较熟悉，绘制主要还是靠画布canvas和画笔Paint和完成的，画布就是你绘制图形的地方，画笔就是你用来作画的笔。

画布canvas

画布是一个矩形区域，我们可以控制其每一像素来绘制我们想要的内容

canvas 拥有多种绘制点、线、路径、矩形、圆形、以及添加图像的方法，结合这些方法我们可以绘制出千变万化的画面。

虽然，画布可以画这些东西，但是决定这些图形颜色、粗细表现的还是画笔。

画笔Paint

Paint非常好理解，就是我们用来画图形的工具，我们可以设置画笔的颜色、粗细、是否抗锯齿、笔触形状以及作画风格。

通过这些属性我们可以很方便的来定制自己的UI效果，当然我们在“作画”的过程中可以定义多个画笔，这样更方便我们对图形的绘制

Paint _paint = Paint()
    ..color = Colors.blueAccent //画笔颜色
    ..strokeCap = StrokeCap.round //画笔笔触类型
    ..isAntiAlias = true //是否启动抗锯齿
    ..blendMode = BlendMode.exclusion //颜色混合模式
    ..style = PaintingStyle.fill //绘画风格，默认为填充
    ..colorFilter = ColorFilter.mode(Colors.blueAccent,
        BlendMode.exclusion) //颜色渲染模式，一般是矩阵效果来改变的,但是flutter中只能使用颜色混合模式
    ..maskFilter =
    MaskFilter.blur(BlurStyle.inner, 3.0) //模糊遮罩效果，flutter中只有这个
    ..filterQuality = FilterQuality.high //颜色渲染模式的质量
    ..strokeWidth = 15.0 //画笔的宽度
      ;

Offset坐标

这个就比较简单，一般指得是在坐标系中的一个点。

		Offset(dx, dy)

Rect

在图形的绘制中，一般都是分区域绘制的，这个区域一般都是一个矩形，在绘制中通常使用Rect来存储绘制的位置信息。

当然，你可以指定Rect的上、下、左、右

• left ： 矩形左边的X坐标
• top: 矩形顶部的Y坐标
• right : 矩形右边的X坐标
• bottom： 矩形底部的Y坐标

使用你这四个值就可以确定这个矩形的位置和大小。

当然，在一些平台还会有Rect.fromCircle（Offset center, double radius）这个方法来构建矩形，其实想起来也是很简单的，center就是圆心的坐标，radius就是圆的半径，由这两个属性构成圆的外切矩形就是我们需要的矩形。

Rect的多种构建方式：

fromPoints(Offset a, Offset b)
使用左上和右下角坐标来确定矩形的大小和位置

fromCircle({ Offset center, double radius })
使用圆的圆心点坐标和半径和确定外切矩形的大小和位置

fromLTRB(double left, double top, double right, double bottom)
使用矩形左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标来确定矩形的大小和位置

fromLTWH(double left, double top, double width, double height)
使用矩形左边的X坐标、矩形顶部的Y坐标矩形的宽高来确定矩形的大小和位置

Flutter中的坐标系

在Flutter中坐标系的坐标原点在左上角，X坐标越往右越大，Y坐标越往下越大

因为在View自定义过程中我们需要排放多个View，所以弄清楚这一点，在以后自定义Wdiget中会轻松很多。

相关代码