Flutter 自定义 (CustomPainter Container)

原文地址:https://juejin.im/post/5cb56f5ef265da03474df6b5

Flutter 中使用自绘方式自定义Widget,大致步骤如下:
1 继承CustomPainter并重写paint方法和shouldRepaint
2 在写paint方法中绘制内容
3 使用CustomPaint来构建Widget

例子代码段

import 'package:flutter/material.dart';

class BackGrid extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Center(
        child: CustomPaint(
          size: Size(300, 300),
          painter: new MyPaint(),
        ),
      ),
    );
  }
}

class MyPaint extends CustomPainter{

  @override
  void paint(Canvas canvas, Size size) {
    double eWidth = size.width / 30;
    double eHeight = size.height / 30;

    /*画棋盘背景*/
    var paint = Paint()
      ..isAntiAlias = true
      ..style = PaintingStyle.stroke
      ..color = Color(0x77cdb175);/*背景颜色*/

    canvas.drawRect(Offset.zero & size, paint);

    /*画棋盘网格*/
    paint
     ..style = PaintingStyle.stroke
     ..color = Colors.red
     ..strokeWidth = 1.0;

    for(int i=0;i<=30;i++){
      double dy = eHeight * i;
      canvas.drawLine(Offset(0, dy), Offset(size.width, dy), paint);
    }

    for(int i=0;i<=30;i++){
      double dx = eWidth * i ;
      canvas.drawLine(Offset(dx, 0), Offset(dx, size.height), paint);
    }
  }

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