Flutter中如何实现仅修改当前点击容器的颜色，而非所有对象变色

问题根源 #

你所有渲染出来的容器共用同一个cpressed布尔状态变量，只要调用setState修改这个值，所有绑定了该变量的容器都会同步更新颜色，该问题和Key的设置无关。

修复步骤 #

第一步：修改状态变量类型 #

把原有的全局布尔状态bool cpressed = false;替换为存储选中容器ID的变量，支持单选/多选两种场景：

• 单选场景：仅允许同时选中1个容器

  // 定义在State类中，存储当前选中的容器ID，初始为未选中
  String? selectedContainerId;
  

• 多选场景：允许同时选中多个容器

  // 定义在State类中，存储所有选中的容器ID，初始为空集合
  Set<String> selectedContainerIds = {};
  

第二步：修改长按触发逻辑 #

替换原有的onLongPress回调，只修改当前点击容器对应的选中状态：

• 单选场景逻辑：

  onLongPress: () {
    setState(() {
      final currentId = snapshot.data!.docs[index].id;
      // 如果当前容器已选中则取消选中，否则设为选中
      selectedContainerId = selectedContainerId == currentId ? null : currentId;
    });
  },
  

• 多选场景逻辑：

  onLongPress: () {
    setState(() {
      final currentId = snapshot.data!.docs[index].id;
      if (selectedContainerIds.contains(currentId)) {
        selectedContainerIds.remove(currentId);
      } else {
        selectedContainerIds.add(currentId);
      }
    });
  },
  

第三步：修改容器颜色判断逻辑 #

将原有的颜色判断条件替换为当前容器ID是否在选中范围内：

• 单选场景：

  color: selectedContainerId == snapshot.data!.docs[index].id ? Colors.red : Colors.blue,
  

• 多选场景：

  color: selectedContainerIds.contains(snapshot.data!.docs[index].id) ? Colors.red : Colors.blue,
  

补充说明 #

你之前给Container加Key的操作无法解决问题的原因是：Key的作用是在Widget树更新时帮助Flutter区分同类型的不同Widget，不会干预状态和组件的绑定逻辑，所有组件绑定同一个全局状态的情况下，不管加不加Key都会跟着全局状态同步更新。

内容的提问来源于stack exchange，提问作者Thesha Dowo