【Flutter】六、Flutter之表单多选框——Checkbox、CheckboxListTile
Checkbox和CheckboxListTile都是多选框控件,CheckboxListTile可以设置title,Checkbox只显示一个多选框。
一、CheckBox
1.1 CheckBox构造器
const Checkbox({
Key key,
@required this.value,
this.tristate = false,
@required this.onChanged,
this.activeColor,
this.checkColor,
this.materialTapTargetSize,
}) : assert(tristate != null),
assert(tristate || value != null),
super(key: key);
2.2 CheckBox属性说明
属性 | 说明 |
---|---|
bool value | 是否被选中 |
ValueChanged onChanged | 状态被改变的回调 |
Color activeColor | 被选中时的颜色 |
Color checkColor | 被选中时图标的颜色,就是对号的颜色,默认为Color(0xFFFFFFFF) |
bool tristate | 是否为三个状态 true:checbox的value可以是true、false、null;复选框为null时显示一个’-‘ false:checkbox的value只能是true or false |
MaterialTapTargetSize materialTapTargetSize | 控制多选框tap目标的大小 MaterialTapTargetSize.padded MaterialTapTargetSize.shrinkWrap shrinkWrap比padded要小一点 |
2.3 CheckBox示例
Checkbox(
value: _checkBoxValue,
activeColor: Colors.green,
checkColor: Colors.red,
tristate: true,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
onChanged: (data) {
print(data);
setState(() {
this._checkBoxValue = data;
data == true || data !=null ? this._checkColor = Theme.of(context).primaryColor :
this._checkColor = Colors.grey;
});
},
)
二、CheckboxListTile
2.1 CheckboxListTile构造器
const CheckboxListTile({
Key key,
@required this.value,
@required this.onChanged,
this.activeColor,
this.title,
this.subtitle,
this.isThreeLine = false,
this.dense,
this.secondary,
this.selected = false,
this.controlAffinity = ListTileControlAffinity.platform,
}) : assert(value != null),
assert(isThreeLine != null),
assert(!isThreeLine || subtitle != null),
assert(selected != null),
assert(controlAffinity != null),
super(key: key);
2.2 CheckboxListTile属性说明
属性 | 说明 |
---|---|
bool value | 同Checkbox |
ValueChanged onChanged | 同Checkbox |
Color activeColor | 同Checkbox |
Widget title | 定义Checkbox的标题 |
Widget subtitle | 定义Checkbox的副标题 |
Widget secondary | 一个小部件,显示在与复选框相对的另一侧 |
bool isThreeLine | 是否显示三行 |
bool dense | 是否垂直密集排列 |
bool selected | 是否将activeColor应用于title、subtitle、secondary,一般设为false |
ListTileControlAffinity controlAffinity | 控件相对于文本的位置 1.ListTileControlAffinity.leading:复选框在前面 2.ListTileControlAffinity.trailing: 复选框在后面,secondary在前面 3.ListTileControlAffinity.platform:以当前平台的典型方式将控件相对于文本定位,并将辅助小部件放在另一侧。 |
2.3 CheckboxListTile示例
List<Widget> _getCheckboxListTitle() {
return checkboxList.map((item) =>
Flexible(
child: CheckboxListTile(
title: Text(item['text']),
subtitle: Text(item['text']),
value: item['value'],
activeColor: Colors.cyanAccent,
secondary: Icon(Icons.add),
isThreeLine: false,
dense: false,
selected: false,
controlAffinity: ListTileControlAffinity.trailing,
onChanged: (data){
setState(() {
item['value'] = data;
});
},
),
)
).toList();
}
@override
void initState() {
super.initState();
this.checkboxList = [
{
'text': 'Java',
'value': false
},
{
'text': 'Dart',
'value': true
}
];
}
@override
Widget build(BuildContext context){
return Row(
children: _getCheckboxListTitle()
);
}