Flutter中复用Widget分配唯一Key后仍无法单独变色的问题

问题出在你用了**单个全局变量isCorrect**控制所有选项的颜色，所有OptionField都绑定这个值，只要调用setState更新它，所有选项都会同步变色——传入的UniqueKey是帮Flutter区分Widget实例的，但状态是共享的，所以起不到单独控制的作用。

要实现点击单个选项仅改变自身颜色，需要给每个选项单独维护状态：

1. 替换全局的isCorrect变量为状态列表，每个元素对应一个选项的状态：

// 把原来的 int isCorrect = 0; 替换成
List<int> optionStates = List.filled(4, 0); // 4是选项数量，初始全为0（对应白色）

2. 修改选项点击逻辑，只更新当前点击选项的状态：

onTap: () {
  bool isAnswerCorrect = widget.QandAnsList[questionCounter].Answers[index] == widget.QandAnsList[questionCounter].CorrectAnswer;
  
  setState(() {
    // 仅更新当前点击索引对应的选项状态
    optionStates[index] = isAnswerCorrect ? 1 : 2;
  });

  if (isAnswerCorrect) {
    ca++;
  }

  if (questionCounter == questionMaxLength - 1) {
    openDialog('Quiz Completed!', 'Click on the Submit button below to see the Result');
  } else {
    Timer(const Duration(seconds: 2), () => setState(() {
          questionCounter++;
          // 切换题目时重置所有选项状态
          optionStates = List.filled(4, 0);
        }));
  }
},

3. 给OptionField传入对应索引的状态值，而非全局的isCorrect：

child: OptionField(
  option[index],
  widget.QandAnsList[questionCounter].Answers[index],
  UniqueKey(),
  optionStates[index], // 这里传当前选项的独立状态
),

这样每个选项的颜色只由自己对应的optionStates[index]控制，点击哪个就更新哪个的状态，其他选项不受影响。

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