flutter开发：CustomPaint 自由绘制

1.简介

在flutter里面有着万物皆是widget这句话，CustomPaint是Flutter中用于自由绘制的一个widget。它与android原生的绘制规则基本一致，以当前Canves(画布)的左上角为原点进行绘制。

2.使用

简单的使用

1. 这个页面除去AppBar，下面整个都是CustomPaint的范围。
2. 要实现绘制，需传入painter参数，定义自己的painter继承自CustomPainter，这里面得必须重写paint和shouldRepaint。但实现绘制仅需实现paint方法
3. paint的两个参数 canvas 和 size ，分别是画布和CustomPaint的子widget的宽高尺寸。
4. 接着仅需cavas的 draw操作就可以了。

import 'package:flutter/material.dart';

class MyPaint extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('CustomPaint'),
      ),
      body: CustomPaint(
        painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter{

  Paint _myPaint;
  @override
  void paint(Canvas canvas, Size size) {
   _myPaint = new Paint();
   _myPaint.color =Colors.blue;

   //canvas.drawPaint(_myPaint);
   canvas.drawCircle(Offset(100,100), 100, _myPaint);
   canvas.drawLine(Offset(300,300),Offset(400,400) , _myPaint);

  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return null;
  }
}

其他重要属性

1. CustomPaint的构造函数
   child: 红色区域，传入一个子widget，这个widget图层会在painter在上，在foregroundPainter之下。
   painter：蓝色区域。
   foregroundPainter：绿色区域，它与painter都是CustomPainter类型的。通过名字大概也就知道了，它会在painter的上层，也就是说在同样的位置去绘制，foregroundPainter 会覆盖painter。
   
   isComplex: 绘制是否足够复杂需要缓存，作用很明显就是为了避免在每个图层上重复渲染。
   isChange：下一帧中绘制是否更改。

size：默认值是size.zero(宽高都是0)，可以理解为这个就是child的宽高，但是有child后以，这个参数被child的尺寸代替。这里传入的size在pain方法里可以获取到。源码里面用这句话解释“The size that this [CustomPaint] should aim for, given the layout”，但就我测试情况看，无论如何更改size，绘制结果不受任何影响。

总结

CustomPaint基本的使用没什么问题，但是部分参数就源码注释和使用情况来看理解深度不够。