一、CheckBox和CheckboxListTile介绍
Checkbox：是勾选框控件，本身不包含任何状态，改变状态需要通过改变value的值改变
CheckboxListTile：通常情况下，我们不直接使用Checkbox，而是使用CheckboxListTile，因为我们需要Checkbox后面添加说明
二、源码
2.1、CheckBox源码
const Checkbox({
Key key,
@required this.value,//此单选按钮表示的值，bool类型
this.tristate = false,//默认false，如果为true，复选框的值可以为true、false或null
@required this.onChanged,//监听 当复选框的值应该更改时调用
this.mouseCursor,
this.activeColor,//选中此复选框时要使用的颜色
this.checkColor,//选中此复选框时用于复选图标的颜色
this.focusColor,
this.hoverColor,
this.materialTapTargetSize,//配置tap目标的最小大小
this.visualDensity,
this.focusNode,
this.autofocus = false,
}) : assert(tristate != null),
assert(tristate || value != null),
assert(autofocus != null),
super(key: key);
2.2、CheckboxListTile源码
const CheckboxListTile({
Key key,
@required this.value,//此单选按钮表示的值
@required this.onChanged,//监听 当复选框的值应该更改时调用
this.activeColor,//选中此复选框时要使用的颜色
this.checkColor,//选中此复选框时用于复选图标的颜色
this.title,//标题
this.subtitle,//副标题
this.isThreeLine = false,//是否三行显示
this.dense,//是否密集垂直
this.secondary,//配置图标或者图片
this.selected = false,// text 和 icon 的 color 是否 是 activeColor 的颜色
this.controlAffinity = ListTileControlAffinity.platform,//控件相对于文本的位置
this.autofocus = false,
this.contentPadding,//内间距
this.tristate = false,//如果为true，则复选框的[值]可以为true、false或null。
}) : assert(tristate != null),
assert(tristate || value != null),
assert(isThreeLine != null),
assert(!isThreeLine || subtitle != null),
assert(selected != null),
assert(controlAffinity != null),
assert(autofocus != null),
super(key: key);
三、属性介绍
3.1、Checkbox的属性介绍
| 属性 | 说明 |
|---|---|
| value | 此单选按钮表示的值，bool类型 |
| tristate | 默认false，如果为true，复选框的值可以为true、false或null 如果为false，value不能为空 |
| onChanged | 监听 当复选框的值应该更改时调用 |
| activeColor | 选中此复选框时要使用的颜色 |
| checkColor | 选中此复选框时用于复选图标的颜色,默认为√的颜色 |
| materialTapTargetSize | 配置tap目标的最小大小 |
3.1、CheckboxListTile的属性介绍
| 属性 | 说明 |
|---|---|
| value | 见Checkbox的属性介绍 |
| onChanged | 见Checkbox的属性介绍 |
| activeColor | 见Checkbox的属性介绍 |
| checkColor | 见Checkbox的属性介绍 |
| title | 标题 |
| subtitle | 副标题 |
| isThreeLine | 是否三行显示 |
| dense | 是否密集垂直 |
| secondary | 配置图标或者图片 |
| selected | text 和 icon 的 color 是否 是 activeColor 的颜色 |
| controlAffinity | 控件相对于文本的位置 ListTileControlAffinity.platform 根据不同的平台，来显示 对话框 的位置 ListTileControlAffinity.trailing：勾选在右，title 在中，secondary 在左 |
| contentPadding | 内间距 |
| tristate | 见Checkbox的属性介绍 |
四、demo
4.1、Checkbox的demo
class _CheckBoxFulState extends State {
bool estState = false;
bool sleepState = false;
bool hitState = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("StatefulWidget模板"),
),
body: Container(
child: Column(
children: [
Row(
children: [
Checkbox(
value: estState,
activeColor: Colors.red,
checkColor: Colors.yellow,
onChanged: (bool value) {
setState(() {
estState = value;
});
},
),
Text("吃饭")
],
),
Row(
children: [
Checkbox(
value: sleepState,
activeColor: Colors.red,
checkColor: Colors.yellow,
onChanged: (bool value) {
setState(() {
sleepState = value;
});
},
),
Text("睡觉")
],
),
Row(
children: [
Checkbox(
value: hitState,
activeColor: Colors.red,
checkColor: Colors.yellow,
onChanged: (bool value) {
setState(() {
hitState = value;
});
},
),
Text("打豆豆")
],
)
],
)
)),
);
}
}
1a91ea6f3f4f0be1467ed1399f1eb77.png
4.2、CheckboxListTile的demo
class _CheckBoxFulState extends State {
bool eatState = false;
bool sleepState = false;
bool hitState = false;
@override
void initState() {
super.initState();
eatState = true;
sleepState = false;
hitState = false;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("CheckboxListTile学习"),
),
body: Container(
child: Column(
children: [
CheckboxListTile(
value: eatState,
onChanged: (value) {
setState(() {
eatState = value;
});
},
title: Text("吃饭"),
activeColor: Colors.blue,
checkColor: Colors.red,
secondary: Icon(Icons.cake_rounded),
),
CheckboxListTile(
value: sleepState,
onChanged: (value) {
setState(() {
sleepState = value;
});
},
activeColor: Colors.blue,
checkColor: Colors.red,
title: Text("睡觉"),
secondary: Icon(Icons.airline_seat_individual_suite_sharp),
),
CheckboxListTile(
value: hitState,
onChanged: (value) {
setState(() {
hitState = value;
});
},
activeColor: Colors.blue,
checkColor: Colors.red,
title: Text("打豆豆"),
secondary: Icon(Icons.accessibility_new),
)
],
),
)),
);
}
}
77f7999ee22e6d094591b606fbb0116.png