通过CustomPainter进行绘制，可实现一些复杂的自定义绘制组件，是Flutter中自定义组件的灵魂人物。

CustomPaint绘线图形

【painter】 : 绘画器 【CustomPainter】
image.png

  1. import 'package:flutter/material.dart';
  2. class ClockPage extends StatelessWidget {
  3.   @override
  4.   Widget build(BuildContext context) {
  5.     return Container(
  6.       width: MediaQuery.of(context).size.width,
  7.       height: 100,
  8.       child:CustomPaint(//使用CustomPaint盛放画布
  9.           painter: ClockPainter(),
  10.       ),
  11.     )
  12.     ;
  13.   }
  14. }
  16. class ClockPainter extends CustomPainter {
  17.   Paint _paint;
  18.   var _radius = 3.0; //小球半径
  19.   Path _path = Path(); //画笔对象
  20.   ClockPainter () {
  21.     _paint = Paint()..color= Color(0xff45d0fd)..isAntiAlias=true;
  22.     _path.addOval(Rect.fromCircle(radius: _radius, center: Offset(0, 0))); //小球路径
  23.   }
  25.   @override
  26.   void paint(Canvas canvas, Size size) {
  27.     print(size);
  28.     canvas.clipRect(Offset.zero & size);
  29.     canvas.translate(size.width/2-65*2, 0);
  30.     renderDigit(1, canvas);//渲染数字
  31.     canvas.translate(65, 0);//平移画布
  32.     renderDigit(9, canvas);
  33.     canvas.translate(65, 0); renderDigit(9, canvas);
  34.     canvas.translate(65, 0); renderDigit(4, canvas);
  35.   }
  36.   //渲染数字  num  ：要显示的数字   canvas ：画布
  37.   void renderDigit(int num, Canvas canvas) {
  38.     if (num > 10) {  return; }
  39.     for (int i = 0; i < digit[num].length; i++) {
  40.       for (int j = 0; j < digit[num][j].length; j++) {
  41.         if (digit[num][i][j] == 1) {
  42.           canvas.save();
  43.           double rX = j * 2 * (_radius + 1) + (_radius + 1); //第(i，j)个点圆心横坐标
  44.           double rY = i * 2 * (_radius + 1) + (_radius + 1); //第(i，j)个点圆心纵坐标
  45.           canvas.translate(rX, rY);
  46.           canvas.drawPath(_path, _paint);
  47.           canvas.restore();
  48.         }
  49.       }
  50.     }
  51.   }
  52.   @override
  53.   bool shouldRepaint(CustomPainter oldDelegate)=> false;
  54. }
  56. const digit = [
  57.   [
  58.     [0, 0, 1, 1, 1, 0, 0],
  59.     [0, 1, 1, 0, 1, 1, 0],
  60.     [1, 1, 0, 0, 0, 1, 1],
  61.     [1, 1, 0, 0, 0, 1, 1],
  62.     [1, 1, 0, 0, 0, 1, 1],
  63.     [1, 1, 0, 0, 0, 1, 1],
  64.     [1, 1, 0, 0, 0, 1, 1],
  65.     [1, 1, 0, 0, 0, 1, 1],
  66.     [0, 1, 1, 0, 1, 1, 0],
  67.     [0, 0, 1, 1, 1, 0, 0]
  68.   ], //0
  70.   [
  71.     [0, 0, 0, 1, 1, 0, 0],
  72.     [0, 1, 1, 1, 1, 0, 0],
  73.     [0, 0, 0, 1, 1, 0, 0],
  74.     [0, 0, 0, 1, 1, 0, 0],
  75.     [0, 0, 0, 1, 1, 0, 0],
  76.     [0, 0, 0, 1, 1, 0, 0],
  77.     [0, 0, 0, 1, 1, 0, 0],
  78.     [0, 0, 0, 1, 1, 0, 0],
  79.     [0, 0, 0, 1, 1, 0, 0],
  80.     [1, 1, 1, 1, 1, 1, 1]
  81.   ], //1
  82.   [
  83.     [0, 1, 1, 1, 1, 1, 0],
  84.     [1, 1, 0, 0, 0, 1, 1],
  85.     [0, 0, 0, 0, 0, 1, 1],
  86.     [0, 0, 0, 0, 1, 1, 0],
  87.     [0, 0, 0, 1, 1, 0, 0],
  88.     [0, 0, 1, 1, 0, 0, 0],
  89.     [0, 1, 1, 0, 0, 0, 0],
  90.     [1, 1, 0, 0, 0, 0, 0],
  91.     [1, 1, 0, 0, 0, 1, 1],
  92.     [1, 1, 1, 1, 1, 1, 1]
  93.   ], //2
  94.   [
  95.     [1, 1, 1, 1, 1, 1, 1],
  96.     [0, 0, 0, 0, 0, 1, 1],
  97.     [0, 0, 0, 0, 1, 1, 0],
  98.     [0, 0, 0, 1, 1, 0, 0],
  99.     [0, 0, 1, 1, 1, 0, 0],
  100.     [0, 0, 0, 0, 1, 1, 0],
  101.     [0, 0, 0, 0, 0, 1, 1],
  102.     [0, 0, 0, 0, 0, 1, 1],
  103.     [1, 1, 0, 0, 0, 1, 1],
  104.     [0, 1, 1, 1, 1, 1, 0]
  105.   ], //3
  107.   [
  108.     [0, 0, 0, 0, 1, 1, 0],
  109.     [0, 0, 0, 1, 1, 1, 0],
  110.     [0, 0, 1, 1, 1, 1, 0],
  111.     [0, 1, 1, 0, 1, 1, 0],
  112.     [1, 1, 0, 0, 1, 1, 0],
  113.     [1, 1, 1, 1, 1, 1, 1],
  114.     [0, 0, 0, 0, 1, 1, 0],
  115.     [0, 0, 0, 0, 1, 1, 0],
  116.     [0, 0, 0, 0, 1, 1, 0],
  117.     [0, 0, 0, 1, 1, 1, 1]
  118.   ], //4
  119.   [
  120.     [1, 1, 1, 1, 1, 1, 1],
  121.     [1, 1, 0, 0, 0, 0, 0],
  122.     [1, 1, 0, 0, 0, 0, 0],
  123.     [1, 1, 1, 1, 1, 1, 0],
  124.     [0, 0, 0, 0, 0, 1, 1],
  125.     [0, 0, 0, 0, 0, 1, 1],
  126.     [0, 0, 0, 0, 0, 1, 1],
  127.     [0, 0, 0, 0, 0, 1, 1],
  128.     [1, 1, 0, 0, 0, 1, 1],
  129.     [0, 1, 1, 1, 1, 1, 0]
  130.   ], //5
  131.   [
  132.     [0, 0, 0, 0, 1, 1, 0],
  133.     [0, 0, 1, 1, 0, 0, 0],
  134.     [0, 1, 1, 0, 0, 0, 0],
  135.     [1, 1, 0, 0, 0, 0, 0],
  136.     [1, 1, 0, 1, 1, 1, 0],
  137.     [1, 1, 0, 0, 0, 1, 1],
  138.     [1, 1, 0, 0, 0, 1, 1],
  139.     [1, 1, 0, 0, 0, 1, 1],
  140.     [1, 1, 0, 0, 0, 1, 1],
  141.     [0, 1, 1, 1, 1, 1, 0]
  142.   ], //6
  143.   [
  144.     [1, 1, 1, 1, 1, 1, 1],
  145.     [1, 1, 0, 0, 0, 1, 1],
  146.     [0, 0, 0, 0, 1, 1, 0],
  147.     [0, 0, 0, 0, 1, 1, 0],
  148.     [0, 0, 0, 1, 1, 0, 0],
  149.     [0, 0, 0, 1, 1, 0, 0],
  150.     [0, 0, 1, 1, 0, 0, 0],
  151.     [0, 0, 1, 1, 0, 0, 0],
  152.     [0, 0, 1, 1, 0, 0, 0],
  153.     [0, 0, 1, 1, 0, 0, 0]
  154.   ], //7
  155.   [
  156.     [0, 1, 1, 1, 1, 1, 0],
  157.     [1, 1, 0, 0, 0, 1, 1],
  158.     [1, 1, 0, 0, 0, 1, 1],
  159.     [1, 1, 0, 0, 0, 1, 1],
  160.     [0, 1, 1, 1, 1, 1, 0],
  161.     [1, 1, 0, 0, 0, 1, 1],
  162.     [1, 1, 0, 0, 0, 1, 1],
  163.     [1, 1, 0, 0, 0, 1, 1],
  164.     [1, 1, 0, 0, 0, 1, 1],
  165.     [0, 1, 1, 1, 1, 1, 0]
  166.   ], //8
  167.   [
  168.     [0, 1, 1, 1, 1, 1, 0],
  169.     [1, 1, 0, 0, 0, 1, 1],
  170.     [1, 1, 0, 0, 0, 1, 1],
  171.     [1, 1, 0, 0, 0, 1, 1],
  172.     [0, 1, 1, 1, 0, 1, 1],
  173.     [0, 0, 0, 0, 0, 1, 1],
  174.     [0, 0, 0, 0, 0, 1, 1],
  175.     [0, 0, 0, 0, 1, 1, 0],
  176.     [0, 0, 0, 1, 1, 0, 0],
  177.     [0, 1, 1, 0, 0, 0, 0]
  178.   ], //9
  179.   [
  180.     [0, 0, 0, 0],
  181.     [0, 0, 0, 0],
  182.     [0, 1, 1, 0],
  183.     [0, 1, 1, 0],
  184.     [0, 0, 0, 0],
  185.     [0, 0, 0, 0],
  186.     [0, 1, 1, 0],
  187.     [0, 1, 1, 0],
  188.     [0, 0, 0, 0],
  189.     [0, 0, 0, 0]
  190.   ] //:
  191. ];

CustomPaint绘线贝塞尔曲线

Flutter也支持贝塞尔曲线等复杂绘制。
image.png

import 'dart:ui';
import 'package:flutter/material.dart';
class PlayBezier3Page extends StatefulWidget {
  @override
  _PlayBezier3PageState createState() => _PlayBezier3PageState();
}

class _PlayBezier3PageState extends State<PlayBezier3Page> {
  List<Offset> _pos = <Offset>[];
  int selectPos;

  @override
  void initState() {
    _initPoints();
    super.initState();
  }

  void _initPoints() {
    _pos = List<Offset>();
    _pos.add(Offset(0, 0));
    _pos.add(Offset(60, -60));
    _pos.add(Offset(-90, -90));
    _pos.add(Offset(-120, -40));
  }


  @override
  Widget build(BuildContext context) {
    return  Container(
        height: 200,
        width: MediaQuery.of(context).size.width,
        child: CustomPaint(
          painter: BezierPainter(pos: _pos, selectPos: selectPos),
        ),

    );
  }
}

class BezierPainter extends CustomPainter {
  Paint _gridPaint;
  Path _gridPath;

  Paint _mainPaint;
  Path _mainPath;
  int selectPos;
  Paint _helpPaint;

  List<Offset> pos;

  BezierPainter({this.pos, this.selectPos}) {
    _gridPaint = Paint()..style = PaintingStyle.stroke;
    _gridPath = Path();

    _mainPaint = Paint()
      ..color = Colors.orange
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    _mainPath = Path();

    _helpPaint = Paint()
      ..color = Colors.purple
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..strokeCap = StrokeCap.round;
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.clipRect(Offset.zero & size);
    canvas.translate(size.width / 2, size.height / 2);
    _drawGrid(canvas, size); //绘制格线
    _drawAxis(canvas, size); //绘制轴线

      _mainPath.moveTo(pos[0].dx, pos[0].dy);
      _mainPath.cubicTo(pos[1].dx, pos[1].dy, pos[2].dx, pos[2].dy, pos[3].dx, pos[3].dy);
      canvas.drawPath(_mainPath, _mainPaint);
      _drawHelp(canvas);
      _drawSelectPos(canvas);

  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;

  void _drawGrid(Canvas canvas, Size size) {
    _gridPaint
      ..color = Colors.grey
      ..strokeWidth = 0.5;
    _gridPath = _buildGridPath(_gridPath, size);
    canvas.drawPath(_buildGridPath(_gridPath, size), _gridPaint);

    canvas.save();
    canvas.scale(1, -1); //沿x轴镜像
    canvas.drawPath(_gridPath, _gridPaint);
    canvas.restore();

    canvas.save();
    canvas.scale(-1, 1); //沿y轴镜像
    canvas.drawPath(_gridPath, _gridPaint);
    canvas.restore();

    canvas.save();
    canvas.scale(-1, -1); //沿原点镜像
    canvas.drawPath(_gridPath, _gridPaint);
    canvas.restore();
  }

  void _drawAxis(Canvas canvas, Size size) {
    canvas.drawPoints(
        PointMode.lines,
        [
          Offset(-size.width / 2, 0),
          Offset(size.width / 2, 0),
          Offset(0, -size.height / 2),
          Offset(0, size.height / 2),
          Offset(0, size.height / 2),
          Offset(0 - 7.0, size.height / 2 - 10),
          Offset(0, size.height / 2),
          Offset(0 + 7.0, size.height / 2 - 10),
          Offset(size.width / 2, 0),
          Offset(size.width / 2 - 10, 7),
          Offset(size.width / 2, 0),
          Offset(size.width / 2 - 10, -7),
        ],
        _gridPaint
          ..color = Colors.blue
          ..strokeWidth = 1.5);
  }

  Path _buildGridPath(Path path, Size size, {step = 20.0}) {
    for (int i = 0; i < size.height / 2 / step; i++) {
      path.moveTo(0, step * i);
      path.relativeLineTo(size.width / 2, 0);
    }
    for (int i = 0; i < size.width / 2 / step; i++) {
      path.moveTo(step * i, 0);
      path.relativeLineTo(
        0,
        size.height / 2,
      );
    }
    return path;
  }

  void _drawHelp(Canvas canvas) {
    canvas.drawPoints(PointMode.lines, pos, _helpPaint..strokeWidth = 1);
    canvas.drawPoints(PointMode.points, pos, _helpPaint..strokeWidth = 8);
  }

  void _drawSelectPos(Canvas canvas) {
    if (selectPos == null) return;
    canvas.drawCircle(
        pos[selectPos],
        10,
        _helpPaint
          ..color = Colors.green
          ..strokeWidth = 2);
  }
}