Flutter 自定义Widget-CheckBox flutter

文章目录

1. 继承CustomPainter
2. void paint(Canvas canvas, Size size) 画图
3. bool shouldRepaint(CustomPainter oldDelegate) 判断是否重绘
4. 使用RepaintBoundary和CustomPaint
5. 添加点击事件GestureDetector和背景用组合的方式
其他类似，就是熟悉Canvas和Paint的API
怎么在外面修改 _CheckTextBox 的isChecked的值呢？
flutter 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 paintdouble _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的值呢？

【Flutter 自定义Widget-CheckBox】现在私有无法获取_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