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
网友评论