Flutter 输入组件 Checkbox 详解

[1. 引言](#1. 引言)

[2. Checkbox 的基本用法](#2. Checkbox 的基本用法)

[3. 主要属性](#3. 主要属性)

[4. 自定义 Checkbox 样式](#4. 自定义 Checkbox 样式)

[4.1 带文本标签的 CheckboxListTile](#4.1 带文本标签的 CheckboxListTile)

编辑

[4.2 使用 tristate 设置三种状态](#4.2 使用 tristate 设置三种状态)

[5. 结论](#5. 结论)

1. 引言

在 Flutter 中，Checkbox 是一个常用的多选组件，适用于设置开关选项、同意协议、筛选条件等场景。Checkbox 允许用户勾选或取消勾选，并可通过 value 和 onChanged 进行状态管理。本文将介绍 Checkbox 的基本用法、主要属性及自定义样式。

2. Checkbox 的基本用法

Checkbox 需要 value 设定当前选中状态，并通过 onChanged 监听用户交互。

Dart 复制代码

bool isChecked = false;

Checkbox(
  value: isChecked,
  onChanged: (bool? newValue) {
    setState(() {
      isChecked = newValue!;
    });
  },
)

3. 主要属性

属性	说明
`value`	复选框的当前状态（`true` 选中，`false` 未选中）
`onChanged`	状态变更时的回调函数
`activeColor`	复选框选中时的颜色
`checkColor`	复选标记的颜色
`tristate`	是否支持三态（`true` / `false` / `null`）
`shape`	自定义复选框形状

示例：

Dart 复制代码

Checkbox(
  value: true,
  activeColor: Colors.blue,
  checkColor: Colors.white,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
  onChanged: (bool? newValue) {},
)

4. 自定义 Checkbox 样式

4.1 带文本标签的 CheckboxListTile

Dart 复制代码

CheckboxListTile(
  title: Text('同意条款'),
  value: isChecked,
  onChanged: (bool? newValue) {
    setState(() {
      isChecked = newValue!;
    });
  },
)

4.2 使用 `tristate` 设置三种状态

Dart 复制代码

Checkbox(
  tristate: true,
  value: null, // 三态：选中、未选中、部分选中（null）
  onChanged: (bool? newValue) {},
)

5. 结论

Checkbox 是 Flutter 中用于多选的核心组件，适用于多种交互场景。可以结合 CheckboxListTile 提供更丰富的 UI，支持 activeColor、shape 及 tristate 等自定义配置。熟练掌握 Checkbox 的使用，有助于创建更友好的用户体验。

Flutter 输入组件 Checkbox 详解

1. 引言

2. Checkbox 的基本用法

3. 主要属性

4. 自定义 Checkbox 样式

4.1 带文本标签的 CheckboxListTile

4.2 使用 tristate 设置三种状态

5. 结论

相关推荐

4.2 使用 `tristate` 设置三种状态