Flutter代码问题：选择错误答案时如何同时显示正确与错误答案？

需求：用户选择错误答案时，需要用颜色区分展示正确答案（绿色）和所选错误答案（红色）。现有代码仅会将所选错误答案标红，正确答案仍为灰色；尝试修改后的代码未生效。

原代码 #

Color getColorForOption(Answer answer) {
    bool correctAnswer = answer.isCorrect;
    bool isSelected = answer == selecetedAnswer;
    if (isSelected) {
        return correctAnswer ? Colors.green : Colors.red;
     } 
      return Colors.grey.shade300;
    }

尝试的代码（未生效） #

Color getColorForOption(Answer answer) {
    bool correctAnswer = answer.isCorrect;
    bool isSelected = answer == selecetedAnswer;
    if (isSelected) {
      return correctAnswer ? Colors.green : Colors.red;
    } else if (correctAnswer) {
      return Colors.green;
    }
    return Colors.grey.shade300;
  }

可行修改方案 #

问题核心是缺少「用户是否已提交答案」的状态标记——尝试的代码会让正确答案始终显示绿色，不管用户有没有提交，不符合正常交互逻辑。我们需要新增一个状态变量来控制提交后的显示逻辑：

1. 添加状态变量标记答案是否已提交：

bool isAnswerSubmitted = false;

（用户点击提交按钮时，将此变量设为true）

2. 修改getColorForOption方法：

Color getColorForOption(Answer answer) {
  bool isCorrect = answer.isCorrect;
  bool isSelected = answer == selectedAnswer; // 修复原代码拼写错误：selecetedAnswer → selectedAnswer

  // 已提交答案后，展示正确项和选中的错误项
  if (isAnswerSubmitted) {
    if (isCorrect) {
      return Colors.green;
    } else if (isSelected) {
      return Colors.red;
    }
    return Colors.grey.shade300;
  }

  // 未提交时，仅高亮当前选中项
  return isSelected ? (isCorrect ? Colors.green : Colors.red) : Colors.grey.shade300;
}

逻辑说明 #

• 未提交答案时：仅高亮用户当前选中的选项，正确则显示绿色，错误则显示红色，其余选项保持灰色
• 提交答案后：
  • 所有正确答案统一显示绿色
  • 用户选中的错误答案显示红色
  • 其他未选中的错误答案保持灰色

这样既实现了需求中「选择错误答案时同时展示正确答案与所选错误答案」的效果，也保留了未提交时的正常交互逻辑。

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