Flutter 自定义 View 介绍

前提

对于一些复杂或不规则的UI，我们可能无法使用现有的 Widget 组合去实现，比如需要一个带动画的进度条，

又或者是一个特殊形状的多边形等等，当然有时候我们可以直接用图片去实现，但是并没有达到我们想要

的效果，反而会让我们产生不良的体验。

几乎所有的UI系统都会提供一个自绘UI的接口，这个接口通常会提供一块2D画布Canvas，Canvas内部封装了

一些基本绘制的API，开发者可以通过Canvas绘制各种自定义图形。在Flutter中，提供了一个CustomPaint Widget，

它可以结合一个画笔CustomPainter来实现绘制自定义图形。

CustomPaint 与 Canvas

CustomPaint

我们看看 CustomPaint 构造函数：

const CustomPaint({
    Key key,
    this.painter,
    this.foregroundPainter,
    this.size = Size.zero,
    this.isComplex = false,
    this.willChange = false,
    Widget child, //子节点，可以为空
  })

1.painter: 背景画笔，会显示在子节点后面;

2.foregroundPainter: 前景画笔，会显示在子节点前面

3.size：当child为null时，代表默认绘制区域大小，如果有child则忽略此参数，画布尺寸则为child尺寸。如果有child但是想指定画布为特定大小，可以使用SizeBox包裹CustomPaint实现。

4.isComplex：是否复杂的绘制，如果是，Flutter会应用一些缓存策略来减少重复渲染的开销。

5.willChange：和isComplex配合使用，当启用缓存时，该属性代表在下一帧中绘制是否会改变。

可以看到，绘制时我们需要提供前景或者背景画笔，两者也可以同时提供，

我们的画笔需要继承 CustomPainter 类，我们在画笔类中实现真正的绘制逻辑。

注意

1. 一般child属性我们一般不填，即使你是想要在你的CustomPaint上添加一些其他的布局，也不建议放在child属中。
2. size尺寸最好给定，计算一下布局的宽高，设定一下。

Canvas

顾名思义画布的意思，我们绘制布局当然是在一张画布上进行绘制，画布为我们绘制图形提供了很多方法。（熟悉画布的就无需再看了）

//包含了常规图形（具体参数不做介绍）
drawLine   | 画线 
drawPoint  | 画点 
drawPath   | 画路径 
drawImage  | 画图像 
drawRect   | 画矩形 
drawCircle | 画圆 
drawOval   | 画椭圆 
drawArc    | 画圆弧

在绘制之前我们需要准备画笔 Paint，就如画画一样，你用什么笔就能画什么样的画，在Paint中，

我们可以配置画笔的各种属性如粗细、颜色、样式等。如：

var paint = Paint() //创建一个画笔并配置其属性
  ..isAntiAlias = true //是否抗锯齿
  ..style = PaintingStyle.fill //画笔样式：填充
  ..color=Color(0x77cdb175);//画笔颜色
  ..strokeWidth = 10.0;//画笔的宽度

好了，继承CustomPainter类，然后准备好画笔，就可以在画布上尽情的挥洒了！

写的挺简单的，就是介绍了一下自定义view的准备工作以及画布画笔的功能，具体实战请看下一篇博客。