Flutter拖拽游戏：点击按钮后根据答案结果动态修改DragTarget容器背景色

看起来你遇到的核心问题是全局变量无法独立管理每个DragTarget的状态——你用单个tileColor和checked变量控制所有目标的颜色，但每个DragTarget对应的元素都有自己的对错状态，自然没法正确展示每个目标的颜色。

问题根源拆解 #

1. 你当前的tmpElement只是最后一个被处理的元素，点击检查按钮时只会更新它的颜色，其他元素完全没被遍历到。
2. 全局的tileColor是单一值，无法同时存储多个元素的不同颜色状态。

解决方案步骤 #

我们需要让每个ElementModel自己管理对应的背景色，这样点击检查按钮时就能遍历所有元素，逐个设置正确的颜色：

1. 给ElementModel添加颜色属性

让每个元素实例都持有自己的背景色，替换原来的全局tileColor：

class ElementModel {
  ElementModel({
    this.key,
    this.atomicNumber,
    this.element,
    this.symbol,
    this.group,
    this.period,
    this.droppedKey,
    this.accepting,
    this.successfulDrop,
    this.correctDrop,
    this.answer,
    this.tileColor = Colors.white38, // 添加默认颜色参数
  });
  // ... 原有属性
  Color tileColor; // 新增：存储当前元素对应的背景色
}

2. 修改检查按钮的回调逻辑

点击按钮时，遍历所有元素，根据各自的answer设置对应的颜色：

showCheckButton ? ElevatedButton(
  child: Text('check'),
  onPressed: () {
    setState(() {
      // 遍历所有元素，逐个设置颜色
      for (var element in elementDataCopy) {
        element.tileColor = element.answer == 'correct' ? Colors.green : Colors.red;
      }
      checked = true; // 标记为已检查，触发UI更新
    });
  },
) : Draggable(...)

3. 更新DragTarget的颜色取值

在buildElementTileInGrid方法中，使用元素自身的tileColor，而不是全局变量：

return Container(
  padding: EdgeInsets.all(4),
  margin: EdgeInsets.all(4),
  decoration: BoxDecoration(
    border: Border.all(
      width: 4,
      color: accepting == true ? Colors.teal : Colors.transparent,
    ),
    // 改为使用元素自己的tileColor
    color: checked ? tmpElement.tileColor : Colors.white38,
  ),
  child: successfulDrop == true ? Column(...) : Container(),
);

4. 清理冗余全局变量

现在你可以删掉原来的全局tileColor变量了，因为每个元素已经自己管理颜色状态。

为什么这样能解决问题？ #

• 每个ElementModel实例独立存储自己的颜色状态，不会互相干扰。
• 点击检查按钮时遍历所有元素，确保每个DragTarget的颜色都被正确设置。
• 调用setState后，Flutter会重新构建所有DragTarget，此时每个目标都会使用自己更新后的tileColor。

这样修改后，当你点击检查按钮时，所有完成放置的DragTarget就会根据各自的对错状态显示绿色或红色了。

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