目录
1. 引言
在 Flutter 中，Checkbox 是一个常用的多选组件，适用于设置开关选项、同意协议、筛选条件等场景。Checkbox 允许用户勾选或取消勾选，并可通过 value 和 onChanged 进行状态管理。本文将介绍 Checkbox 的基本用法、主要属性及自定义样式。
2. Checkbox 的基本用法
Checkbox 需要 value 设定当前选中状态，并通过 onChanged 监听用户交互。
bool isChecked = false;
Checkbox(
value: isChecked,
onChanged: (bool? newValue) {
setState(() {
isChecked = newValue!;
});
},
)
3. 主要属性
| 属性 | 说明 |
|---|---|
value |
复选框的当前状态（true 选中，false 未选中） |
onChanged |
状态变更时的回调函数 |
activeColor |
复选框选中时的颜色 |
checkColor |
复选标记的颜色 |
tristate |
是否支持三态（true / false / null） |
shape |
自定义复选框形状 |
示例：
Checkbox(
value: true,
activeColor: Colors.blue,
checkColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
onChanged: (bool? newValue) {},
)
4. 自定义 Checkbox 样式
4.1 带文本标签的 CheckboxListTile
CheckboxListTile(
title: Text('同意条款'),
value: isChecked,
onChanged: (bool? newValue) {
setState(() {
isChecked = newValue!;
});
},
)
4.2 使用 tristate 设置三种状态
Checkbox(
tristate: true,
value: null, // 三态：选中、未选中、部分选中（null）
onChanged: (bool? newValue) {},
)
5. 结论
Checkbox 是 Flutter 中用于多选的核心组件，适用于多种交互场景。可以结合 CheckboxListTile 提供更丰富的 UI，支持 activeColor、shape 及 tristate 等自定义配置。熟练掌握 Checkbox 的使用，有助于创建更友好的用户体验。
相关推荐
Flutter IconButton完全指南：高效使用与性能优化秘籍-CSDN博客文章浏览阅读1.4k次，点赞46次，收藏24次。IconButton 是一个带有图标的按钮组件，通常用于工具栏、导航栏或交互操作。IconButton 继承自 StatelessWidget，支持点击事件、大小、颜色等多种自定义属性。本文将介绍 IconButton 的基本用法、主要属性及自定义样式。https://shuaici.blog.csdn.net/article/details/146069934Flutter TextField 从入门到精通：掌握输入框的完整指南-CSDN博客文章浏览阅读916次，点赞39次，收藏29次。本文全面解析 Flutter TextField 控件的使用技巧，覆盖从基础到进阶的完整知识体系。入门部分讲解基础属性（controller、decoration）、键盘类型设置和文本监听；进阶部分深入探讨表单验证（Form+TextFormField）、自定义输入格式（正则表达式验证）、动态样式修改（圆角/图标/动画）以及高级功能（输入长度限制、防抖处理）。通过代码示例演示手机号输入验证、密码隐藏切换、输入掩码等实战场景，并提供多平台适配、性能优化和无障碍访问等最佳实践方案。_flutter textfield
https://shuaici.blog.csdn.net/article/details/146068520