Flutter 自绘制 Widget

点击“奇舞移动技术”关注我们！

内容简介

Flutter Team 已经提供了很多的 widget，风格也不同，比如 Android 的 Material Design 、iOS 的 Cupertino 等等。在大多数情况下，是可以满足基本需求的。但是遇到高度定制化的需求，就难以满足，好在自定义的方式可以满足我们。

Widget 呈现方式

1、组合方式

我们一般实现的布局方式，基本都是排列组合的方式完成的布局组件树，来呈现布局。

2、自己绘制方式

这种方式的使用，基本上是复杂度较高的组件，比如数据可视化需求的南丁格尔玫瑰图，饼状图，多边形等等。

怎样自绘制？

Flutter “毫无创新”地给出类似于很多2D UI系统的画布+画笔的方式完成自定义绘制。具体涉及到的类有：Canvas、Paint、CustomPainter。自定义 CustomPainter 的类，直接看一下代码，如下：

List<Offset> _points = <Offset>[];

class MyCustomPainter extends CustomPainter {
  MyCustomPainter(this.points);

  final List<Offset> points;

  Paint _paint = new Paint()
    ..color = Colors.black
    ..strokeCap = StrokeCap.round
    ..isAntiAlias = true
    ..strokeWidth = 7.0
    ..strokeJoin = StrokeJoin.bevel;

  @override
  void paint(Canvas canvas, Size size) {
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null) {
        canvas.drawLine(points[i], points[i + 1], _paint);
      }
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

重写了两个方法：

1、paint(Canvas canvas, Size size) 绘制的具体操作在这里执行；

2、shouldRepaint 表示当前的 widget 绘制完成后就不需要重新绘制了，自定义组件返回 ture。

利器介绍

画笔 Paint