浅识Flutter 基本组件之CheckboxListTile组件

最新推荐文章于 2024-06-29 12:08:31 发布

阿大豆

最新推荐文章于 2024-06-29 12:08:31 发布

阅读量2.3k

点赞数

分类专栏：浅识Flutter笔记文章标签： flutter android

本文链接：https://blog.csdn.net/qq_43336158/article/details/124579490

版权

本文介绍了Flutter中的CheckboxListTile组件，详细解析了其必备属性value和onChanged，以及controlAffinity属性的用法，展示了如何设置不同位置的复选框。此外，还探讨了如何创建多个CheckboxListTile及实现一键全选/取消全选功能。

摘要由CSDN通过智能技术生成

浅识Flutter 基本组件之CheckboxListTile组件

CheckboxListTile的使用方法、功能和Checkbox差不多，但是它的使用范围更广、设计出的UI更美观

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)