复选框组件,常用于配置的切换,可指定颜色,接收状态变化回调,也可指定三态。
相关组件
CheckboxListTile
Checkbox基础用法
<br />【value】 : 是否选中 【double】<br />【checkColor】: 选中时✔️gou颜色 【Color】<br />【activeColor】: 选中时框内颜色 【Color】<br />【onChanged】: 状态改变事件 【Function(bool)】,<br />![85.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589445601030-4a4a7242-a554-417b-911c-b0a957b68160.gif#align=left&display=inline&height=79&margin=%5Bobject%20Object%5D&name=85.gif&originHeight=79&originWidth=404&size=42513&status=done&style=none&width=404)
import 'package:flutter/material.dart';
class CustomCheckbox extends StatefulWidget {
@override
_CustomCheckboxState createState() => _CustomCheckboxState();
}
class _CustomCheckboxState extends State<CustomCheckbox> {
bool _checked = false;
final colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
@override
Widget build(BuildContext context) {
return Wrap(
spacing: 10,
children: colors
.map((e) =>
Checkbox(
value: _checked,
checkColor: Colors.white,
activeColor: e,
onChanged: (v) =>
setState(() => _checked = v)))
.toList(),
);
}
}
Checkbox的三态
<br />【tristate】 : 是否是三态 【double】<br /> onChanged时,<br />![86.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589445635070-8001484d-8397-439b-b376-cd9ec17e419a.gif#align=left&display=inline&height=79&margin=%5Bobject%20Object%5D&name=86.gif&originHeight=79&originWidth=404&size=40082&status=done&style=none&width=404)
import 'package:flutter/material.dart';
class TristateCheckBok extends StatefulWidget {
@override
_TristateCheckBokState createState() => _TristateCheckBokState();
}
class _TristateCheckBokState extends State<TristateCheckBok> {
bool _checked = false;
final colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
@override
Widget build(BuildContext context) {
return Wrap(
spacing: 10,
children: colors
.map((e) =>
Checkbox(
value: _checked,
tristate: true,
checkColor: Colors.white,
activeColor: e,
onChanged: (v) {
print(v);
setState(() => _checked = v);
}))
.toList(),
);
}
}