Flutter 自定义Widget-CheckBox

1. 继承CustomPainter

2. void paint(Canvas canvas, Size size) 画图

3. bool shouldRepaint(CustomPainter oldDelegate) 判断是否重绘

4. 使用RepaintBoundary和CustomPaint

5. 添加点击事件GestureDetector和背景用组合的方式

其他类似，就是熟悉Canvas和Paint的API

///抽取出来缩小刷新区域
class MyCheckBox extends StatefulWidget {
  // 是否是check状态
  final bool isChecked;

  final Color colorBg;
  final Color color;
  final double size;

  // check回传
  final ValueChanged onChecked;

  MyCheckBox({this.isChecked, this.colorBg = Colors.red,this.color = Colors.blue, this.onChecked,this.size = 300});

  @override
  State createState() => _CheckTextBox(isChecked: isChecked);
}

class _CheckTextBox extends State {
  // 是否是check状态
  bool isChecked;

  _CheckTextBox({this.isChecked: false});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: widget.colorBg,
      child: GestureDetector(
        onTap: () {
          setState(() {
            isChecked = !isChecked;
            // 回传改变事件
            if (widget.onChecked != null) widget.onChecked(isChecked);
          });
        },
        ///防止过度重绘
        child: RepaintBoundary(
          child: CustomPaint(
            size: Size(widget.size, widget.size),
            painter: MyCheckBoxPainter(isCheck: isChecked),
          ),
        ),
      ),
    );
  }
}

class MyCheckBoxPainter extends CustomPainter {
  final _paint = Paint();
  bool isCheck = false;
  Color color;

  set checked(bool newValue) {
    if (newValue != isCheck) {
      isCheck = newValue;
    }
  }

  MyCheckBoxPainter({this.isCheck = false, this.color = Colors.blue}) {
    _paint.color = color; //白色笔
    _paint.isAntiAlias = true; // 抗锯齿
  }

  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint

    double _center = size.height / 2; //中心点
    _paint.strokeWidth = size.height * 0.12; 
    double _radius = _center - _paint.strokeWidth / 2; //半径
    _paint.style = PaintingStyle.stroke; // 设置空心笔
    ///圆形半径为（width-笔的宽度）/2
    ///画弧形是矩形内切
    canvas.drawCircle(Offset(_center, _center), _radius, _paint);
    if (isCheck) {
      _paint.style = PaintingStyle.fill;
      canvas.drawCircle(Offset(_center, _center), _radius / 2, _paint);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return (oldDelegate as MyCheckBoxPainter).isCheck != isCheck;
  }
}

怎么在外面修改 _CheckTextBox 的isChecked的值呢？

现在私有无法获取_CheckTextBox的实例对象，更无法修改
先去掉_,然后通过GlobalKey.currentState获取并修改
(myCheckBoxKey.currentState as CheckTextBox).isChecked = check;

flutter checkbox 源码学习(配置文件)

• class Checkbox extends StatefulWidget
• class _CheckboxState extends State with TickerProviderStateMixin
• class _CheckboxRenderObjectWidget extends LeafRenderObjectWidget
• class _RenderCheckbox extends RenderToggleable
• FocusableActionDetector
• RenderToggleable 需要一个TickerProvider