Flutter - 测验应用程序，正确答案的按钮应显示为绿色

Question

我正在用颤振构建一个测验应用程序，每次用户选择错误答案时，我希望正确答案（按钮）变为绿色。

这些是我的变量

Color colorToShow = transColor;
  Color testColor = transColor;
  Color right = correctColor;
  Color wrong = redColor;
  Map<int, Color> btnColor = {
    0: Colors.transparent,
    1: Colors.transparent,
    2: Colors.transparent,
  };
  Map<int, Color> tabTextColor = {
    0: Colors.blue[800],
    1: Colors.blue[800],
    2: Colors.blue[800],
  };

  int questionIndex;
  bool disableButton = false;
  bool firstPress = true;

这是我检查正确答案的功能：

void checkAnswer1(k) {
      if (questionBank[questionIndex]['answers'][k]['correct']) {
        colorToShow = right;
        Provider.of<QuizData>(context, listen: false).countMarks();
      } else {
        colorToShow = wrong;
        if (questionBank[questionIndex]['answers'][k + 1]['correct']) {
          testColor = right;
        }

        Provider.of<QuizData>(context, listen: false)
            .addWrongAnswers(questionIndex);
        print(Provider.of<QuizData>(context, listen: false).wrongAnswers);
      }
      setState(() {
        tabTextColor[k] = Colors.white;
        btnColor[k] = colorToShow;
        btnColor[k + 1] = testColor;

        disableButton = true;
        firstPress = false;
      });
    }

这里是带有输入的按钮。

                                      AnswerTab(
                                          questionBank[questionIndex]['answers']
                                              [0]['text'],
                                          firstPress
                                              ? () => checkAnswer1(0)
                                              : null,
                                          tabTextColor[0],
                                          btnColor[0]),
                                      SizedBox(height: 16),
                                      AnswerTab(
                                          questionBank[questionIndex]['answers']
                                              [1]['text'],
                                          firstPress
                                              ? () => checkAnswer1(1)
                                              : null,
                                          tabTextColor[1],
                                          btnColor[1]),
                                      SizedBox(height: 16),
                                      AnswerTab(
                                          questionBank[questionIndex]['answers']
                                              [2]['text'],
                                          firstPress
                                              ? () => checkAnswer1(2)
                                              : null,
                                          tabTextColor[2],
                                          btnColor[2]),

这是我的题库的一个sn-p

final List<Map<String, dynamic>> questionBank = [
  {
    'questionText':
        "Το ψαροντουφεκο στη περιοχή του Κεντρικού Λιμεναρχείου Πειραιά απαγορεύεται:",
    'answers': [
      {'text': "Έξω από το λιμάνι του Πειραιά.", "correct": false},
      {'text': "Στις πλάζ του Πειραιά.", "correct": false},
      {
        'text': "Από την Πειραϊκή Χερσόνησο κι έως το 42 χιλ. Πειραιά Σουνίου.",
        "correct": true
      },
    ]
  },

我知道我的问题在于函数和 If 语句，但我想不出办法。 现在我已经测试检查是否只有下一个按钮 (k+1) 正确变绿，当我选择错误答案时它会变绿，但当我选择正确答案时它也会变绿。

请帮忙！

Answer 1

首先，创建一个用于存储问题和答案的类（这有助于您进行实体管理）：

class Qeustion {
  final String text;
  final List<Answer> answers;

  Question(this.text, this.answers);

  factory Question.fromJson(Map<String, dynamic> json) {
    return Question(
      json['questionText'],
      json['answers'].map((answer) => Answer.fromJson(answer)),
    );
  }
}

class Answer {
  final String text;
  final bool isCorrect;

  Answer(this.text, this.isCorrect);

  factory Answer.fromJson(Map<String, dynamic> json) {
    return Answer(
      json['text'],
      json['correct'],
    );
  }
}

在 UI 中处理它：

answers.map((answer) {
  return AnswerTab(
    question.text,
    firstPress ? () => checkAnswer(answer) : null,
    firstPress ? Colors.blue[800] : answer.isCorrect ? Colors.green : Colors.red,
    Colors.transparent,
  ),
});

还有checkAnswer:

void checkAnswer(Answer answer) {
  if (answer.isCorrect) {
    Provider.of<QuizData>(context, listen: false).countMarks();
  } else {
    Provider.of<QuizData>(context, listen: false).addWrongAnswers(questionIndex);
  }
  setState(() {
    disableButton = true;
    firstPress = false;
  });
}

当您调用checkAnswer 方法时，您会更新Provider 中的数据并调用setState。 setState 使用 firstPress 和 disableButton 中的新值触发重建。如果 firstPress 为真 - AnswerTab 小部件应用它并使用所需颜色为标签着色（正确答案为绿色，其他为红色）。