Flutter使用GetX实现答题功能时答下一题前序答案状态异常如何解决

问题根源 #

你的控制器目前仅存储了全局唯一的正确答案索引、选中答案索引两个变量，每次作答新题目时这两个变量会被新题的数值覆盖。所有已渲染的题目在控制器触发更新后，都会读取最新的全局值，导致旧题的选项状态被错误刷新。
此外你在question方法中循环插入isAnswered初始值的逻辑，每次widget重绘都会执行，容易导致列表长度超出预期，建议移到控制器初始化阶段处理。

修改方案 #

1. 调整CardSelectedController存储结构

将单个答案索引改为按题目下标存储的列表，保证每道题的答案数据独立存储：

class CardSelectedController extends GetxController{
  List<bool> _isAnswered = [];
  List<bool> get isAnswered => _isAnswered;

  // 改为列表存储每道题的正确答案索引
  List<int> _correctAnsList = [];
  List<int> get correctAnsList => _correctAnsList;

  // 改为列表存储每道题的用户选中答案索引
  List<int> _selectedAnsList = [];
  List<int> get selectedAnsList => _selectedAnsList;

  @override
  void onInit() {
    super.onInit();
    // 初始化逻辑移到这里，避免重复执行
    for(int i = 0 ; i < 10; i++){
      _isAnswered.add(false);
      _correctAnsList.add(-1);
      _selectedAnsList.add(-1);
    }
  }

  void checkAns(int answerIndex, int selectedIndex , int j) {
    _isAnswered[j] = true;
    // 给对应题目下标赋值，不覆盖其他题的数据
    _correctAnsList[j] = answerIndex;
    _selectedAnsList[j] = selectedIndex;
    update();
  }
}

2. 调整UI层颜色判断逻辑

读取当前题目下标对应的答案数据，不再读取全局的单个值：

Color getTheRightColor() {
  if (qnController.isAnswered[j]) {
    // 取当前题目j对应的正确答案、选中答案
    final correctAns = qnController.correctAnsList[j];
    final selectedAns = qnController.selectedAnsList[j];
    if (i == correctAns) {
      return kGreenColor;
    } else if (i == selectedAns && selectedAns != correctAns) {
      return kRedColor;
    }
  }
  return kGrayColor;
}

3. 移除冗余初始化逻辑

删掉question方法开头的这段循环代码，避免重复插入数据：

for( int i = 0 ; i < 10; i++){
  cardSelectedController.isAnswered.insert(i, false);
}

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