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, ), ], ); } }
Flutter笔记19:CheckBoxListTitle复选框实现全选全不选
CheckBoxListTitle复选框是比CheckBox更加强大的复选框,当然,CheckBoxListTitle实现的效果,用CheckBox也能实现,只不过布局更加麻烦点。这里是用CheckBoxListTitle实现全选全不选的一个简单案例: