You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.22 18:12:29