Flutter待办列表勾选单个复选框时全部项同步选中如何修复

问题原因 #

所有复选框都绑定了全局唯一的checkedValue变量，修改该变量会同步作用到全部列表项，就会出现勾选一个所有项同步选中的问题。

解决方案 #

把待办列表的存储结构从单纯的字符串数组，改成包含「任务内容」和「完成状态」的结构，每一项的勾选状态独立存储，无需提前定义额外实体类即可实现。

修改后的完整代码如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  // 修改todos结构，每个元素存任务内容和勾选状态
  List<Map<String, dynamic>> todos = [];
  String input = "";

  @override
  void initState() {
    super.initState();
    todos.add({"content": "Item1", "isChecked": false});
    todos.add({"content": "Item2", "isChecked": false});
    todos.add({"content": "Item3", "isChecked": false});
    todos.add({"content": "Item4", "isChecked": false});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            "TASKS",
            style: TextStyle(
              fontFamily: "BaksoSapi",
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text("Add Todolist !"),
                    content: TextField(
                      onChanged: (String value) {
                        input = value;
                      },
                    ),
                    actions: <Widget>[
                      TextButton(
                          onPressed: () {
                            setState(() {
                              // 新增任务时也按结构存储
                              todos.add({"content": input, "isChecked": false});
                              Navigator.pop(context);
                            });
                          },
                          child: Text("Add"))
                    ],
                  );
                });
          },
          child: Icon(
            Icons.add,
            color: Colors.white,
          ),
        ),
        body: ListView.builder(
          itemCount: todos.length,
          itemBuilder: (BuildContext context, int index) {
            return Dismissible(
              key: Key(todos[index]['content']),
              child: Card(
                elevation: 4,
                margin: EdgeInsets.all(8),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadiusDirectional.circular(8)),
                child: CheckboxListTile(
                  title: Text(todos[index]['content']),
                  controlAffinity: ListTileControlAffinity.leading,
                  activeColor: Colors.redAccent,
                  // 绑定当前项的独立状态
                  value: todos[index]['isChecked'],
                  onChanged: (newValue) {
                    setState(() {
                      // 只修改当前索引项的状态
                      todos[index]['isChecked'] = newValue!;
                    });
                  },
                ),
              ),
            );
          },
        ));
  }
}

关键修改说明 #

• 移除了全局的checkedValue变量，每个待办项的勾选状态独立存储在自身的isChecked字段中
• 新增任务时按照{"content": 输入内容, "isChecked": false}的格式存入数组
• 复选框状态绑定当前索引对应项的isChecked值，修改时仅更新当前项的字段，不影响其他项
• 补充了添加任务后关闭弹窗的逻辑，避免弹窗一直停留
• 替换了已废弃的FlatButton组件为新版TextButton，消除运行警告

内容的提问来源于stack exchange，提问作者C-Jutsu