Flutter（19）：Material组件之Checkbox/CheckboxListTile

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

Flutter（20）：Material组件之Radio/RadioListTile

Flutter教学目录持续更新中

Github源代码持续更新中