Flutter笔记19：CheckBoxListTitle复选框实现全选全不选

CheckBoxListTitle复选框是比CheckBox更加强大的复选框，当然，CheckBoxListTitle实现的效果，用CheckBox也能实现，只不过布局更加麻烦点。这里是用CheckBoxListTitle实现全选全不选的一个简单案例：

class DemoPage extends StatefulWidget {
  DemoPage({Key key}) : super(key: key);

  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  var _value = false;

  void _valueChanged(bool value) {
    for (var i = 0; i < isChecks.length; i++) {
      isChecks[i] = value;
    }
    setState(() {
      _value = value;
    });
  }

  bool isCheck = false;

  List<bool> isChecks = [false, false, false];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Center(
          child: CheckboxListTile(
            value: _value,
            //默认文字是否高亮
            selected: true,
            onChanged: _valueChanged,
            //文字图标是否对其
            dense: false,
            //文字是否三行显示
            isThreeLine: false,
            title: Text('全选/全不选'),
            //复选框和文字的位置，leading是复选框在文字前，platform和trailing是复选框在文字后
            controlAffinity: ListTileControlAffinity.leading,
            //子标题
            subtitle: Text('勾选下列选项'),
            //左侧小图标
            secondary: Icon(Icons.archive),
            //选中颜色
            activeColor: Colors.red,
          ),
        ),
        SizedBox(
          height: 20.0,
        ),
        CheckboxListTile(
          value: isChecks[0],
          onChanged: (bool val) {
            setState(() {
              isChecks[0] = val;
            });
          },
          //文字图标是否对其
          dense: false,
          //文字是否三行显示
          isThreeLine: false,
          title: Text('足球'),
          //复选框和文字的位置，leading是复选框在文字前，platform和trailing是复选框在文字后
          controlAffinity: ListTileControlAffinity.leading,
          //选中颜色
          activeColor: _value ? Colors.red : Colors.green,
        ),
        CheckboxListTile(
          value: isChecks[1],
          onChanged: (bool val) {
            setState(() {
              isChecks[1] = val;
            });
          },
          //文字图标是否对其
          dense: false,
          //文字是否三行显示
          isThreeLine: false,
          title: Text('乒乓球'),
          //复选框和文字的位置，leading是复选框在文字前，platform和trailing是复选框在文字后
          controlAffinity: ListTileControlAffinity.leading,
          //选中颜色
          activeColor: _value ? Colors.red : Colors.green,
        ),
        CheckboxListTile(
          value: isChecks[2],
          onChanged: (bool val) {
            setState(() {
              isChecks[2] = val;
            });
          },
          //文字图标是否对其
          dense: false,
          //文字是否三行显示
          isThreeLine: false,
          title: Text('篮球'),
          //复选框和文字的位置，leading是复选框在文字前，platform和trailing是复选框在文字后
          controlAffinity: ListTileControlAffinity.leading,
          //选中颜色
          activeColor: _value ? Colors.red : Colors.green,
        ),
      ],
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！