Flutter（19）：Material组件之Checkbox/
2020-09-27 本文已影响0人
starryxp
Flutter教学目录持续更新中
Github源代码持续更新中
1.Checkbox/CheckboxListTile介绍
- Checkbox：复选框，允许用户从一组中选择多个选项。
- CheckboxListTile：在Checkbox 的上层封装，它的外观是提供类似设置页的选择组件，可设置图标和文字。
2.CheckBox属性
- value：是否选中此复选框
- tristate：false，默认false，如果为true，复选框的值可以为true、false或null。
- onChanged：监听，当复选框的值应该更改时调用
- mouseCursor：光标
- activeColor：选中此复选框时要使用的颜色
- checkColor：选中此复选框时用于复选图标的颜色
- autofocus：false
3.CheckboxListTile属性
- value：是否选中此复选框
- onChanged：监听，当复选框的值应该更改时调用
- activeColor：选中此复选框时要使用的颜色
- checkColor：选中此复选框时用于复选图标的颜色
- title：主标题
- subtitle：副标题
- isThreeLine：false,
- dense：是否是列表的一部分
- secondary：显示在复选框前面的小部件
- selected：false，选中后文字高亮，默认false
- controlAffinity：ListTileControlAffinity.platform，控件相对于文本的位置
- autofocus：alse,
- contentPadding：内边距
- tristate：false，默认false，如果为true，复选框的值可以为true、false或null。
4.Checkbox
这个比较简单，主要讲一下tristate这个属性，通常情况Checkbox只有两种状态，但是当tristate为true时支持设置value为null的第三种状态，会有一个特殊样式
false.jpg
true.jpg
null.jpg
bool _checkboxSelected = false;
var _checkboxTextSelected = '已选中';
var _checkboxTextNotSelected = '未选中';
Row(
children: [
Checkbox(
value: _checkboxSelected,
onChanged: (isChecked) {
setState(() {
_checkboxSelected = isChecked;
});
},
tristate: false,
activeColor: Colors.blue,
checkColor: Colors.white,
),
Text(_checkboxSelected
? _checkboxTextSelected
: _checkboxTextNotSelected)
],
),
5.CheckboxListTile
这个就是Checkbox扩展组件，支持设置标题，副标题，还是secondary组件，可以是其他widhet。selected这个属性呢可以支持内部文字，icon跟着activeColor联动变色
1601177575916.jpg
1601177586772.jpg
CheckboxListTile(
value: _checkboxSelected,
onChanged: (isChecked) {
setState(() {
_checkboxSelected = isChecked;
});
},
secondary: Icon(Icons.print),
title: Text('文件一'),
subtitle: Text('会议文件'),
contentPadding: EdgeInsets.all(10),
controlAffinity: ListTileControlAffinity.platform,
selected: _checkboxSelected,
dense: true,
),
下一节：Material组件之Radio/RadioListTile
