微信交流群

老孟公众号

# Checkbox

Checkbox是勾选框控件,本身不包含任何状态,改变状态需要通过改变value的值改变。基本用法如下:

var _checkValue = false;
_buildCheckbox(){
  return Checkbox(
    value: _checkValue,
    onChanged: (value){
      setState(() {
        _checkValue = value;
      });
    },
  );
}
1
2
3
4
5
6
7
8
9
10
11

效果如下:

value值为bool类型,true表示选择状态。

onChanged为发生变化时回调,即点击控件时回调,方法内的参数为新的值。

activeColor为激活状态下颜色,是矩形区域内的颜色,checkColor是选中后“对勾”的颜色,用法如下:

Checkbox(
  activeColor: Colors.red,
  checkColor: Colors.blue,
  ...
)
1
2
3
4
5

效果如下:

# CheckboxListTile

通常情况下,我们不直接使用Checkbox,而是使用CheckboxListTile,因为我们需要Checkbox后面添加说明,用法如下:

Container(
  width: 120,
  child: CheckboxListTile(
    title: Text('老孟'),
    value: _checkValue,
    onChanged: (value){
      setState(() {
        _checkValue = value;
      });
    },
  ),
)
1
2
3
4
5
6
7
8
9
10
11
12

CheckboxListTile默认是充满父组件的,因此需要Container限制其宽度,效果如下:

一般的习惯是将勾选框放在前面,用法如下:

CheckboxListTile(
  controlAffinity: ListTileControlAffinity.leading,
  ...
)
1
2
3
4

ListTileControlAffinity取值范围说明如下:

  • leading:勾选框在开头位置。
  • trailing:勾选框在结尾位置,
  • platform:根据平台确定

还可以设置其子标题和第二图标,用法如下:

CheckboxListTile(
  subtitle: Text('一枚有态度的程序员'),
  secondary: Icon(Icons.person),
  ...
)
1
2
3
4
5

secondary一般放置一个图标,位于勾选框的另一边。效果如下:

selected参数设置true,secondarytitlesubtitle都会被渲染为activeColor的颜色。