dart - flutter 中选择的轨道单选按钮

Question

我已经为一个测验应用程序编写了下面的代码，但我一直在寻找一种方法来比较所选单选按钮和正确的答案，并充分延迟到下一个问题的过渡，以便直观地指示所做的选择。尝试使用 switch 语句和 _counter 变量但导致错误

The following NoSuchMethodError was thrown while handling a gesture:
I/flutter (28574): The method '[]' was called on null.

我不够熟悉，无法理解错误可能指的是哪里/什么，或者这种方法(switch 语句)可能有什么问题。任何更正/指示/提示将不胜感激。谢谢。

import 'dart:async';
import 'package:flutter/material.dart';

Map<String, Map<String, String>> questionBank = {
  "1": {
    "question": "What is the capital of Canada?",
    "ans1": "Toronto",
    "ans2": "Montreal",
    "ans3": "Ottawa",
    "ans4": "Vancouver",
    "coAns": "Ottawa"
  },
  "2": {
    "question": "What is the capital of the United States of America?",
    "ans1": "New York",
    "ans2": "California",
    "ans3": "Texas",
    "ans4": "Washington DC",
    "coAns": "Washington DC"
  },
  "3": {
    "question": "What is the capital of Nigeria?",
    "ans1": "Abuja",
    "ans2": "Lagos",
    "ans3": "Port Harcourt",
    "ans4": "Makurdi",
    "coAns": "Abuja"
  },
  "4": {
    "question": "What is the capital of England?",
    "ans1": "Britain",
    "ans2": "Scotland",
    "ans3": "London",
    "ans4": "Edinburgh",
    "coAns": "London"
  },
  "5": {
    "question": "What is the capital of China?",
    "ans1": "Beijing",
    "ans2": "Shanghai",
    "ans3": "Tianjin",
    "ans4": "Taiwan",
    "coAns": "Beijing"
  },
};

void main() {
  runApp(new _questionDisplay());
}

class _questionDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(home: new QuestDis());
  }
}

class QuestDis extends StatefulWidget {
  QuestDis({Key key}) : super(key: key);

  @override
  _QuestDisState createState() => new _QuestDisState();
}

class _QuestDisState extends State<QuestDis> {

  @override
  var _counter = 1;
  var bkgrdColor = Colors.blue[50];
  int radioValue = 0;

  int ans1Value = 1;
  int ans2Value = 2;
  int ans3Value = 3;
  int ans4Value = 4;

  void handleRadioValueChanged(int value) {
    setState(() {
      radioValue = value;
      /*
      switch (radioValue) {
        case 1:
          bkgrdColor = (questionBank[_counter]["coAns"] ==
                  questionBank[_counter][ans1Value])
              ? Colors.green[50]
              : Colors.red[50];
          break;
        case 2:
          bkgrdColor = (questionBank[_counter]["coAns"] ==
                  questionBank[_counter][ans2Value])
              ? Colors.green[50]
              : Colors.red[50];
          break;
        case 3:
          bkgrdColor = (questionBank[_counter]["coAns"] ==
                  questionBank[_counter][ans3Value])
              ? Colors.green[50]
              : Colors.red[50];
          break;
        case 4:
          bkgrdColor = (questionBank[_counter]["coAns"] ==
                  questionBank[_counter][ans4Value])
              ? Colors.green[50]
              : Colors.red[50];
          break;
      }
       */
      _counter++;
      radioValue = 0;
    });
  }

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        leading: new IconButton(icon: new Icon(Icons.menu), onPressed: null),
        title: new Text('quizApp'),
      ),
      body: new Container(
        child: new Column(
          children: [
            new Expanded(
              child: new Container(
                child: new Column(
                  children: [
                    new Expanded(
                      child: new Container(
                        child: new Card(
                          color: bkgrdColor,
                          child: new Row(
                            children: <Widget>[
                              new Text(
                                  "${questionBank[_counter.toString()]["question"]}"),
                            ],
                          ),
                        ),
                      ),
                    ),
                    new Expanded(
                      child: new Container(
                        child: new Card(
                          child: new Column(
                            children: [
                              new Row(
                                children: <Widget>[
                                  new Radio<int>(
                                      value: ans1Value,
                                      groupValue: radioValue,
                                      onChanged: handleRadioValueChanged),
                                  new Text(
                                      "${questionBank[_counter.toString()]["ans1"]}")
                                ],
                              ),
                              new Divider(),
                              new Row(
                                children: <Widget>[
                                  new Radio<int>(
                                      value: ans2Value,
                                      groupValue: radioValue,
                                      onChanged: handleRadioValueChanged),
                                  new Text(
                                      "${questionBank[_counter.toString()]["ans2"]}")
                                ],
                              ),
                              new Divider(),
                              new Row(
                                children: <Widget>[
                                  new Radio<int>(
                                      value: ans3Value,
                                      groupValue: radioValue,
                                      onChanged: handleRadioValueChanged),
                                  new Text(
                                      "${questionBank[_counter.toString()]["ans3"]}")
                                ],
                              ),
                              new Divider(),
                              new Row(
                                children: <Widget>[
                                  new Radio<int>(
                                      value: ans4Value,
                                      groupValue: radioValue,
                                      onChanged: handleRadioValueChanged),
                                  new Text(
                                      "${questionBank[_counter.toString()]["ans4"]}")
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

如果我是你，我实际上会创建一个问题对象(不要认为这是理所当然的，我正在我的 ipad 上快速写下它，所以语法可能不正确...):

class Question {
  String question;
  List<String> answers;
  String correctAnswer;
  Question(question, answers, correctAnswer);
}

现在您可以使用该对象来创建问题列表:

List<Question> questions = [
  new Question("What is 2+2", ["2", "3", "4"], "4"),
  // create as many questions as you want
];

您可以保留计数器变量并将其实际用作索引。

假设您设法获得用户在名为 chosenAnswer 的字符串中选择的答案。在你的 setState() 中我会做这样的事情:

if (chosenAnswer == questions[_counter].correctAnswer){
  // answer was correct
} else {
  // answer is false
}
// and dont forget to increment your counter
_counter++;

为了向用户显示问题和答案，您可以再次使用计数器变量作为索引并访问存储在列表中的问题对象中的每个可能的答案。

希望能帮到你