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

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

前言

咱们都知道官方有不少的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中会轻松不少。

相关代码