flutter 全选_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 {

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 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,

),

],

);

}

}