【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()
	);
}