Flutter 教程第八章：复选框（Checkbox）详解

8.1 概述

在用户界面中，复选框（Checkbox）通常用于让用户选择多个选项或启用/禁用某些功能。与 Switch 不同，Checkbox 允许多个选项同时处于选中状态，这使得它在表单、设置选项和多项选择场景中得到了广泛应用。

Checkbox 的外观为一个方形框，当被选中时显示对勾标记。它的设计简单，但非常有效。通过灵活的配置，Checkbox 可以自定义其颜色、大小以及启用/禁用状态，提供多种视觉效果和交互方式。

8.2 Checkbox 的基本使用

Checkbox 的基本使用方式非常简单，只需提供两个主要属性——value 和 onChanged。value 控制复选框的选中状态，onChanged 用于监听复选框状态的变化。

示例：

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

在此示例中，isChecked 是一个 bool 变量，表示复选框是否被选中。onChanged 回调会在用户点击复选框时触发，并更新 isChecked 的值。

8.3 Checkbox 的主要属性

属性	类型	说明	默认值
value	bool?	控制复选框是否被选中，true 为选中，false 为未选中，null 表示不确定状态。	必须指定
onChanged	ValueChanged<bool?>?	当复选框状态变化时调用的回调函数。	必须指定
activeColor	Color?	复选框选中时的颜色。	null
checkColor	Color?	复选框内部对勾的颜色。	null
fillColor	MaterialStateProperty<Color?>?	控制复选框背景颜色，通常用于自定义各种状态下的颜色。	null
hoverColor	Color?	当鼠标悬停在复选框上时显示的颜色（主要用于桌面应用）。	null
focusColor	Color?	复选框获得焦点时显示的颜色。	null
materialTapTargetSize	MaterialTapTargetSize?	控制复选框点击目标的大小。可以设置为 padded 或 shrinkWrap，来控制点击区域的扩展。	null
visualDensity	VisualDensity?	控制复选框的密度，影响复选框的大小和内部内容的间距。	null
tristate	bool</