浅识Flutter 基本组件之CheckboxListTile组件

CheckboxListTile常用属性如下表所示。

属性名	类型	功能说明
title	widget	设置主标题组件
subtitle	Widget	设置副标题组件
isThreeLine	bool	设置显示的复选框是否占三行,默认值为false
dense	bool	设置是否垂直密集显示标题
secondary	widget	设置显示的小组件,与□所在位置相反
selected	bool	设置选中后标题文字高亮，默认值为 false
controlAffinity	ListTileControlAffinity	设置□相对于标题文字的位置,取值包含leading(前面)、platform (后面)和trailing(后面)

CheckboxListTile的属性值

  const CheckboxListTile({
    Key? key,
    required this.value,
    required this.onChanged,
    this.activeColor,
    this.checkColor,
    this.tileColor,
    this.title,
    this.subtitle,
    this.isThreeLine = false,
    this.dense,
    this.secondary,
    this.selected = false,
    this.controlAffinity = ListTileControlAffinity.platform,
    this.autofocus = false,
    this.contentPadding,
    this.tristate = false,
    this.shape,
    this.selectedTileColor,
    this.visualDensity,
    this.focusNode,
    this.enableFeedback,
  }) : assert(tristate != null),
       assert(tristate || value != null),
       assert(isThreeLine != null),
       assert(!isThreeLine || subtitle != null),
       assert(selected != null),
       assert(controlAffinity != null),
       assert(autofocus != null),
       super(key: key);

必须要有value,onChanged

CheckboxListTile(onChanged: (bool? value) {  }, value:false,),

controlAffinity 设置□相对于标题文字的位置,取值包含leading(前面)、platform (后面)和trailing(后面)

 /*调整复选框和图标的位置*/
        controlAffinity:ListTileControlAffinity.leading ,

设置前

设置后：

创建多个CheckboxListTile

Column column = Column(
      children: <Widget>[
        CheckboxListTile(
          value: this.isChecked,
          /*设置主标题组件*/
          title: Text(
            '全选',
            style: TextStyle(color: Colors.red),
          ),
          /*设置副标题组件*/
          subtitle: Text('全选表示自成一派'),
          /*设置显示的小组件,与□所在位置相反*/
          secondary: Icon(Icons.flag),
          /*调整复选框和图标的位置*/
          controlAffinity: ListTileControlAffinity.leading,
          onChanged: (bool? value) {
            setState(() {
              isChecked = value!;
            });
          },
        ),
        CheckboxListTile(
          title: Text(select[0]),
            subtitle: Text('堕胎小分队'),
            secondary: Icon(Icons.info),
            /*调整复选框和图标的位置*/
            controlAffinity: ListTileControlAffinity.leading,
            value: flag[0],
            onChanged: (value) {
              setState(() {
                flag[0] = value;
              });
            }
            ),
        CheckboxListTile(
            title: Text(select[1]),
            subtitle: Text('世兰好苦队'),
            secondary: Icon(Icons.info),
            /*调整复选框和图标的位置*/
            controlAffinity: ListTileControlAffinity.leading,
            value: flag[1],
            onChanged: (value) {
              setState(() {
                flag[1] = value;
              });
            }
        ),
        CheckboxListTile(
            title: Text(select[2]),
            subtitle: Text('莞莞类卿队'),
            secondary: Icon(Icons.info),
            /*调整复选框和图标的位置*/
            controlAffinity: ListTileControlAffinity.leading,
            value: flag[2],
            onChanged: (value) {
              setState(() {
                flag[2] = value;
              });
            }
        ),


      ],
    );

实现一键全选或一键取消全选 功能

全部代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class zhucepage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyState();
  }
}

class MyState extends State {
  List flag = [false, false, false];
  List select = ['皇后', '华妃', '甄嬛'];
  bool isChecked = false;
  @override
  Widget build(BuildContext context) {
    Row row = Row(
      children: <Widget>[
        Text('选择你的阵营：   '),
        Text(select[0]),
        Checkbox(
          value: flag[0],
          onChanged: (value) {
            //setState更新值
            setState(() {
              flag[0] = value!;
            });
          },
        ),
        Text(select[1]),
        Checkbox(
          value: flag[1],
          onChanged: (value) {
            //setState更新值
            setState(() {
              flag[1] = value!;
            });
          },
        ),
        Text(select[2]),
        Checkbox(
          value: flag[2],
          onChanged: (value) {
            //setState更新值
            setState(() {
              flag[2] = value!;
            });
          },
        ),
      ],
    );
    /*创建多个CheckboxListTile*/
    Column column = Column(
      children: <Widget>[
        CheckboxListTile(
          value: this.isChecked,
          /*设置主标题组件*/
          title: Text(
            '全选',
            style: TextStyle(color: Colors.red),
          ),
          /*设置副标题组件*/
          subtitle: Text('全选表示自成一派'),
          /*设置显示的小组件,与□所在位置相反*/
          secondary: Icon(Icons.flag),
          /*调整复选框和图标的位置*/
          controlAffinity: ListTileControlAffinity.leading,
          onChanged: (bool? value) {
            setState(() {
              isChecked = value!;

                for(int i=0;i<flag.length;i++){
                 flag[i]=isChecked;
                
              }
            });
          },
        ),
        CheckboxListTile(
          title: Text(select[0]),
            subtitle: Text('堕胎小分队'),
            secondary: Icon(Icons.info),
            /*调整复选框和图标的位置*/
            controlAffinity: ListTileControlAffinity.leading,
            value: flag[0],
            onChanged: (value) {
              setState(() {
                flag[0] = value;
              });
            }
            ),
        CheckboxListTile(
            title: Text(select[1]),
            subtitle: Text('世兰好苦队'),
            secondary: Icon(Icons.info),
            /*调整复选框和图标的位置*/
            controlAffinity: ListTileControlAffinity.leading,
            value: flag[1],
            onChanged: (value) {
              setState(() {
                flag[1] = value;
              });
            }
        ),
        CheckboxListTile(
            title: Text(select[2]),
            subtitle: Text('莞莞类卿队'),
            secondary: Icon(Icons.info),
            /*调整复选框和图标的位置*/
            controlAffinity: ListTileControlAffinity.leading,
            value: flag[2],
            onChanged: (value) {
              setState(() {
                flag[2] = value;
              });
            }
        ),


      ],
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('用户注册'),
        centerTitle: true,
      ),
      body: column,

      floatingActionButton: FloatingActionButton(
        onPressed: () {
          String info = "你选择的阵营是：";
          for (int i = 0; i < flag.length; i++) {
            if (flag[i]) {
              /*如果选项被选中*/
              info = info + select[i] + ' ';
            }
          }
          print(info);
        },
        tooltip: 'Increment',
        child: Icon(Icons.save),
      ),
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerFloat, //浮标的位置
    );
  }
}