Flutter ListView选中项颜色异常：点击单一项所有项同步变色

你当前用了一个全局的isCorrect变量控制所有选项的颜色，点击任意选项时都会修改这个变量，导致所有OptionField组件都接收到同一个状态值，所以全部选项同时变色。

需要单独记录被选中的选项索引以及该选项的对错状态，让每个选项只根据自己的选中状态切换颜色。以下是具体修改步骤：

1. 替换全局状态变量 #

在你的State类中，把原来的int isCorrect替换为记录选中索引和对错的变量：

// 记录被选中的选项索引，未选中时为null
int? selectedIndex;
// 记录选中选项的对错状态
bool? isAnswerCorrect;

2. 修改ListView的点击逻辑 #

更新onTap方法，点击时记录当前选中的索引和该选项是否正确：

onTap: () {
  bool correct = widget.QandAnsList[questionCounter].Answers[index] == 
                  widget.QandAnsList[questionCounter].CorrectAnswer;
  setState(() {
    selectedIndex = index;
    isAnswerCorrect = correct;
  });
},

3. 修改OptionField的参数传递 #

调用OptionField时，只给被选中的选项传递正确/错误状态，其他选项保持未选中状态：

child: OptionField(
  option[index],
  widget.QandAnsList[questionCounter].Answers[index],
  ValueKey(index.toString()),
  // 仅当前选项是选中项时，返回对应状态，否则返回0（未选中）
  selectedIndex == index ? (isAnswerCorrect! ? 1 : 2) : 0,
),

可选：用Map管理多选项状态（更灵活） #

如果需要支持更复杂的状态管理（比如保留历史选中状态），可以用Map记录每个选项的状态：

// State类中定义
Map<int, int> optionStatus = {};

@override
void initState() {
  super.initState();
  // 初始化4个选项为未选中状态（0）
  for (int i = 0; i < 4; i++) {
    optionStatus[i] = 0;
  }
}

修改点击逻辑：

onTap: () {
  bool correct = widget.QandAnsList[questionCounter].Answers[index] == 
                  widget.QandAnsList[questionCounter].CorrectAnswer;
  setState(() {
    // 单选模式下，先重置所有选项为未选中
    optionStatus.updateAll((key, value) => 0);
    // 设置当前选中选项的状态
    optionStatus[index] = correct ? 1 : 2;
  });
},

传递参数给OptionField：

child: OptionField(
  option[index],
  widget.QandAnsList[questionCounter].Answers[index],
  ValueKey(index.toString()),
  optionStatus[index]!,
),

说明 #

这样修改后，每个选项只会根据自己的索引判断是否是被选中的项，只有被点击的选项才会切换为绿色或红色，其他选项保持白色。你之前设置的ValueKey能确保ListView的item正确复用，无需调整。

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