前言
最近在撸flutter代码的时候发现CheckBox不是那么好用，一直想是否可以跟Android的CheckBox一样可以设置文字在右边，看了网上的代码都是用组件嵌套在里面，所以决定写一个自定义个不用嵌套使用简单的CheckBox
思路
首先说一下实现一个CheckBox我们需要画一个空心圆、一个实心圆和一行文字，再增加一个点击事件即可实现简单的CheckeBox。
编码
1、创建一个CheckRender和RenderBox
我这里创建RenderBox的时候就定义了一下组件的大小为14，先不去计算组件的大小。
import 'package:flutter/material.dart';
import 'dart:math' as Math;
class CheckRender extends LeafRenderObjectWidget {
CheckRender({Key key}) : super(key: key);
@override
RenderObject createRenderObject(BuildContext context) => _CheckedRender();
}
class _CheckedRender extends RenderBox {
final _paint = Paint();
_CheckedRender() {
_paint.color = Colors.white; //白色笔
_paint.isAntiAlias = true; // 抗锯齿
}
@override
void performLayout() {
double width = Math.max(constraints.minWidth, 14.0);
double height = Math.max(constraints.minHeight, 14.0);
// 最终宽度
size = Size(width, height);
}
@override
void paint(PaintingContext context, Offset offset) {
super.paint(context, offset);
Canvas canvas = context.canvas;
}
}
2、在paint函数中画一个空心圆和实心圆
（1）计算空心圆的中心点和半径出来，我们上面就给组价设置过高度和宽度
double _center = size.height / 2;//中心点
double _radius = _center - _center * 0.12 / 2;//半径
（2）设置paint的style为空心及线条宽度
_paint.style = PaintingStyle.stroke; // 设置空心笔
_paint.strokeWidth = height * 0.12;// 设置空心圆的宽度
（3）绘制空心圆（canvas在上面已经定义了）
Offset centerH = Offset(offset.dx + _center, offset.dy + _center); //中心位置
Rect arcRect = Rect.fromCircle(center: centerH, radius: _radius);//范围大小
canvas.drawArc(arcRect, 0.0, 360, false, _paint);//画出空心圆
（4）绘制实心圆
// 给paint的style设置为实心
_paint.style = PaintingStyle.fill;
// 画中间的圆圈
Rect arcRectCenter = Rect.fromCircle(center: centerH, radius: _radius / 1.8);
// 画实心圆
canvas.drawArc(arcRectCenter, 0.0, 360, false, _paint);
实现效果图
3、绘制文字
在flutter的canvas中画文字的方法是drawParagraph，在ParagraphBuilder可以设置很多样式我们这次用不到，这次只是画个文字在上面显示就行。
1、创建一个Paragraph对象
var paragraph = ui.ParagraphBuilder(ui.ParagraphStyle(fontSize: 14))
..pushStyle(ui.TextStyle(color: Colors.white))
..addText('CheckBox');
Paragraph _paragraph = paragraph.build()
..layout(ui.ParagraphConstraints(width: double.infinity));
2、重新计算组件宽度performLayout
@override
void performLayout() {
double width = Math.max(constraints.minWidth, 14.0);
double height = Math.max(constraints.minHeight, 14.0);
// 最终宽度
size = Size(width + _paragraph.minIntrinsicWidth, height);
}
3、画出文字
canvas.drawParagraph(_paragraph, Offset(centerH.dx + 5.5 + _center, offset.dy + (size.height + _paragraph.height) / 2));
CheckBox图
4、增加状态切换
1、处理事件分发
在_CheckedRender里面添加
@override
bool hitTest(HitTestResult result, {ui.Offset position}) {
if(size.contains(position)) {
result.add(BoxHitTestEntry(this, position));
return true;
}
return false;
}
2、创建一个CheckTextBox继承StatefulWidget
继承一个带状态的widget并且用GestureDetector包住CheckRender
class CheckTextBox extends StatefulWidget {
@override
State<StatefulWidget> createState() => _CheckTextBox();
}
class _CheckTextBox extends State<CheckTextBox> {
// 是否是check状态
bool _isChecked = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
child: CheckRender(),
onTap: () => setState(() {_isChecked = !_isChecked;}),
);
}
}
不想写了............完整代码贴出来。
完整代码
import 'dart:math' as Math;
import 'dart:ui' as ui;
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
class CheckTextBox extends StatefulWidget {
// 是否是check状态
final bool isChecked;
// check文本
final String text;
// check回传
final ValueChanged<bool> onChecked;
CheckTextBox(this.text, {Key key, this.isChecked: false, this.onChecked})
: super(key: key);
@override
State<StatefulWidget> createState() => _CheckTextBox(isChecked: isChecked);
}
class _CheckTextBox extends State<CheckTextBox> {
// 是否是check状态
bool isChecked;
_CheckTextBox({this.isChecked: false});
@override
Widget build(BuildContext context) {
return GestureDetector(
child: CheckRender(isChecked: isChecked, text: widget.text),
onTap: () => setState(() {
isChecked = !isChecked;
// 回传改变事件
if (widget.onChecked != null) widget.onChecked(isChecked);
}),
);
}
}
class CheckRender extends LeafRenderObjectWidget {
final bool isChecked;
final String text;
CheckRender({Key key, this.text, this.isChecked}) : super(key: key);
@override
RenderObject createRenderObject(BuildContext context) =>
_CheckedRender(checked: isChecked, text: text);
@override
void updateRenderObject(BuildContext context, _CheckedRender renderObject) {
renderObject.isChecked = isChecked;
renderObject.text = text;
}
}
class _CheckedRender extends RenderBox {
final _paint = Paint();
ui.Paragraph _paragraph;
bool _checked = false;
String _text = '';
_CheckedRender({checked: false, text}) {
_checked = checked;
_text = text;
_paint.color = Color(0xffffffff); //白色笔
_paint.isAntiAlias = true; // 抗锯齿
resetText();
}
@override
void performLayout() {
double width = Math.max(constraints.minWidth, 14.0);
double height = Math.max(constraints.minHeight, 14.0);
if (_paragraph != null) {
width += _paragraph.minIntrinsicWidth + 5.5;
}
// 最终宽度
size = Size(width, height);
}
@override
void paint(PaintingContext context, Offset offset) {
super.paint(context, offset);
Canvas canvas = context.canvas;
double _center = size.height / 2; //中心点
double _radius = _center - _center * 0.12 / 2; //半径
_paint.style = PaintingStyle.stroke; // 设置空心笔
_paint.strokeWidth = size.height * 0.12; // 设置空心圆的宽度
Offset centerH = Offset(offset.dx + _center, offset.dy + _center); //中心位置
Rect arcRect = Rect.fromCircle(center: centerH, radius: _radius); //范围大小
canvas.drawArc(arcRect, 0.0, 360, false, _paint); //画出空心圆
// 判断是否选中
if (_checked) {
// 设置实心圆
_paint.style = PaintingStyle.fill;
// 画中间的圆圈
Rect arcRectCenter =
Rect.fromCircle(center: centerH, radius: _radius / 1.8);
canvas.drawArc(arcRectCenter, 0.0, 360, false, _paint);
}
if (_paragraph != null) {
// 画出文字
canvas.drawParagraph(
_paragraph,
Offset(centerH.dx + _center + 5.5,
offset.dy + (size.height - _paragraph.height) / 2));
}
}
@override
bool hitTest(HitTestResult result, {ui.Offset position}) {
if (size.contains(position)) {
result.add(BoxHitTestEntry(this, position));
return true;
}
return false;
}
@override
bool hitTestSelf(Offset position) => true;
void resetText() {
var paragraph = ui.ParagraphBuilder(ui.ParagraphStyle(fontSize: 14))
..pushStyle(ui.TextStyle(color: Color(0xffffffff)))
..addText(_text);
_paragraph = paragraph.build()
..layout(ui.ParagraphConstraints(width: double.infinity));
}
set isChecked(bool newValue) {
if (newValue != _checked) {
_checked = newValue;
markNeedsPaint();
}
}
set text(String newValue) {
if (newValue != _text) {
_text = newValue;
resetText();
markNeedsPaint();
}
}
}
