Flutter中CheckboxListTile无法正常工作,求技术解决方案
待办事项应用CheckboxListTile组件故障排查
我正在开发一款待办事项应用,但其中的CheckboxListTile组件无法正常工作,不清楚问题出在哪里,希望有人能提供帮助。
相关代码如下:
class mainTaskScreen extends Stateful Widget { const mainTaskScreen({Key? key}) : super(key: key); @override State<mainTaskScreen> createState() => _mainTaskScreenState(); } class _mainTaskScreenState extends State<mainTaskScreen> { @override Widget build(BuildContext context) { bool _valueCheck = false; return Scaffold( backgroundColor: const Color(0XFF7FC8F8), //------------------------------------------------------------------------------ // AddTask Button... floatingActionButton: FloatingActionButton( onPressed: (() {}), backgroundColor: AppColor.mainColor, child: const Icon(FontAwesomeIcons.plus), ), body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( padding: const EdgeInsets.only(top: 60, left: 30, right: 30, bottom: 10), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ //------------------------------------------------------------------------------ // Menu Button.. (ElevatedButton( style: ElevatedButton.styleFrom( primary: AppColor.accentColor, onPrimary: AppColor.mainColor, fixedSize: const Size(70, 70), shape: const CircleBorder()), onPressed: (() {}), child: const Icon(FontAwesomeIcons.listUl, size: 30), )), const SizedBox(height: 10), //------------------------------------------------------------------------------ // Title... Text('Todoey', style: AppFonts.titleStyle), //------------------------------------------------------------------------------ // Task's Num... Text('12 Task', style: AppFonts.smallStyle), ], ), ), //------------------------------------------------------------------------------ // Task's List... Expanded( child: Container( padding: const EdgeInsets.only(left: 20), width: double.infinity, decoration: const BoxDecoration( color: AppColor.accentColor, borderRadius: BorderRadius.only( topLeft: Radius.circular(25), topRight: Radius.circular(25), ), ), child: ListView( children: [ CheckboxListTile( title: Text('Clean you room', style: taskText.smallStyle), subtitle: const Text('remove the trach + clean your cloths'), activeColor: AppColor.accentColor, checkColor: AppColor.mainColor, value: _valueCheck, selected: _valueCheck, onChanged: ((value) { setState(() { _valueCheck = value!; }); }), ), ], ), ), ), ], ), ); } }
应用界面截图:
问题原因
你把状态变量_valueCheck定义在了build方法内部。每次调用setState触发界面重绘时,build方法会重新执行,_valueCheck会被重新初始化为false,导致勾选状态无法被保留,看起来组件就像没反应一样。
修复方案
把_valueCheck移到State类的成员变量位置,让它成为类的属性,这样重绘时不会被重新初始化:
修改后的关键代码部分:
class _mainTaskScreenState extends State<mainTaskScreen> { // 把变量移到这里,作为类成员 bool _valueCheck = false; @override Widget build(BuildContext context) { // 移除这里的bool _valueCheck = false; return Scaffold( // ... 其余代码保持不变 ); } }
这样修改后,点击Checkbox时,状态会被正确保存,组件就能正常响应勾选操作了。
内容的提问来源于stack exchange,提问作者AHMED Gamal
相关产品推荐
相关产品推荐

