Flutter开发中点击单个Card为何会导致所有卡片样式同步变更

API 探路者

2026-10-5

问题修复方案

问题根因

新增待办时没有同步初始化_enabledMap中对应条目的状态，导致所有条目状态读取异常
点击事件中使用了不存在的item.isTapped变量，没有实际将对应条目的状态更新到_enabledMap
声明了全局的_color、_enabled变量，所有卡片共用这两个全局状态，修改后所有卡片都会同步变化
TextStyle 中的三元运算符存在语法错误，无法正确读取状态值

修复步骤

第一步：修改_addTodoItem方法，新增待办时同步初始化_enabledMap对应状态

void _addTodoItem(String title) {
  setState(() {
    _todoList.add(title);
    _enabledMap[title] = false; // 初始化当前待办的未选中状态
  });
  _textFieldController.clear();
}

第二步：修改_buildTodoItem中的点击逻辑，仅更新当前条目对应_enabledMap的状态，删除全局变量的引用

onTap: () => setState(() {
  _enabledMap[title] = !_enabledMap[title]!;
}),

第三步：修正TextStyle的语法，根据当前条目的状态动态设置样式和背景色，不用全局_color变量

Widget _buildTodoItem(String title) {
  return Padding(
    padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0.0),
    child: Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: InkWell(
        onTap: () => setState(() {
          _enabledMap[title] = !_enabledMap[title]!;
        }),
        child: Container(
          width: double.infinity,
          height: 75,
          alignment: Alignment.center,
          child: Text(
            title,
            style: TextStyle(
              decoration: _enabledMap[title] == true ? TextDecoration.lineThrough : null,
              color: _enabledMap[title] == true ? Colors.grey[700] : Colors.black,
            ),
          ),
          color: _enabledMap[title] == true ? Colors.grey[300] : Colors.white,
        ),
      ),
    )
  );
}