Flutter开发之——交互组件-Checkbox和CheckboxListTile

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

本文介绍Flutter中的复选框组件

  • Checkbox是只有复选框的组件
  • CheckboxListTile是带有复选框和标题文字的组件

二 Checkbox

2.1 构造方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const Checkbox({
   Key? key,
   required this.value,
   this.tristate = false,
   required this.onChanged,
   this.mouseCursor,
   this.activeColor,
   this.fillColor,
   this.checkColor,
   this.focusColor,
   this.hoverColor,
   this.overlayColor,
   this.splashRadius,
   this.materialTapTargetSize,
   this.visualDensity,
   this.focusNode,
   this.autofocus = false,
 }) : assert(tristate != null),
      assert(tristate || value != null),
      assert(autofocus != null),
      super(key: key);

2.2 常用属性

属性 说明 取值
value 是否被选中 bool对象
onChanged 选中变化 ValueChanged<bool?>?对象
activeColor 复选框背景颜色 Colors对象
checkColor 选中对号颜色 Colors对象

2.3 示例

代码

1
2
3
4
5
6
7
8
9
10
var _checkValue = false;
Checkbox(
          activeColor: Colors.grey,
          checkColor: Colors.red,
          value: _checkValue,
          onChanged: (value) {
              setState(() {
                   _checkValue = value;
              });
        })

效果图

三 CheckboxListTile

3.1 构造方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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,
  })

3.2 常用属性

属性 说明 取值
value 是否被选中 bool对象
onChanged 选中变化 ValueChanged<bool?>?对象
activeColor 复选框背景颜色 Colors对象
checkColor 选中对号颜色 Colors对象
title 标题 Widget对象
subtitle 副标题 Widget对象
secondary 复选框另一侧的控件 Widget对象
controlAffinity① 文本放置控件的位置 ListTileControlAffinity枚举

controlAffinity①

取值 说明
leading 勾选框在开头位置
trailing 勾选框在结尾位置
platform 根据平台确定

3.3 示例

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
var _checkboxListTileValue = false;
CheckboxListTile(
                subtitle: Text('Checkbox副标题'),
                secondary: Icon(Icons.person),
                controlAffinity: ListTileControlAffinity.trailing,
                title: Text('Checkbox标题'),
                value: _checkboxListTileValue,
                onChanged: (value) {
                  setState(() {
                    _checkboxListTileValue = value;
                  });
                },
              )

效果图