Блог

В настоящее время я пытаюсь создать приложение с Flutter, которое помогает пользователю запоминать французский словарь. Я хочу, чтобы пользователь мог нажать кнопку, чтобы проверить свой ответ, сразу увидеть, является ли его ответ правильным или неправильным, а затем иметь задержку на несколько секунд, чтобы просмотреть их исправленный ответ, прежде чем вопрос изменится. Вот фрагмент моего кода:

 Padding(
          padding: const EdgeInsets.fromLTRB(10.0, 100.0, 0.0, 0.0),
          child: RaisedButton(
            color: Colors.white,
            child: Text(
              'Check Answer.',
              style: TextStyle(
                fontFamily: 'Oswald',
                fontStyle: FontStyle.italic,
                fontSize: 18.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            onPressed: (){
              answer = myController.text;
              isCorrect = (answer == answers.elementAt(element));
              isCorrect == true ? AnswerMessage = "Correct!" : answerMessage = "Sorry, that answer was incorrect.";
              Future.delayed(const Duration(milliseconds: 5000), () {
                setState(() {
                  element = question.nextInt(3);
                  word = questions.elementAt(element);
                });
              });
            },
          ),
        ),
  

Для справки я создал два массива, один для вопросов и один для ответов, а переменная ‘element’ — это просто случайное число, которое подключается к обоим массивам для генерации вопроса и ожидаемого ответа.

Я получаю ответ пользователя с помощью контроллера в виджете текстового поля, а затем сравниваю его с соответствующим элементом в массиве «ответы». В зависимости от того, является ли указанное выше условие истинным или ложным, я обновляю переменную ‘answerMessage’ для отображения на экране правильного ответа или нет. После этого я попытался установить задержку примерно на 5 секунд, прежде чем переменной ‘element’ будет присвоено новое случайное целое значение (которое соответствует новому вопросу, случайно выбранному из моего массива ‘questions’), прежде чем переменная ‘word’, отображаемая на экране, будет обновлена, чтобы отразитьновый вопрос. Я не могу найти никаких проблем с моим кодом, но по какой-то причине моя программа вместо этого ждет 5 секунд, прежде чем даже отобразить, прав пользователь или нет, а затем немедленно обновляет вопрос, что противоречит цели задержки, поскольку весь смысл задержки заключается в том, чтобы у пользователя было некоторое времячтобы убедиться, что их ответ правильный, прежде чем переходить к следующему вопросу.

Ваш вопрос ясен, и изменение, которое вам нужно внести, находится в функции onPressed:

 onPressed: (){
  
  answer = myController.text;
  isCorrect = (answer == answers.elementAt(element));
  isCorrect == true ? answerMessage = "Correct!" : answerMessage = "Sorry, that answer was incorrect.";

  setState(() {
  });

 Future.delayed(const Duration(milliseconds: 5000), () {
            setState(() {
              element = question.nextInt(3);
              word = questions.elementAt(element);
            });
          });
}
  

Когда вы нажимаете кнопку, вы фактически не обновляете состояние, поэтому вы не можете увидеть, правильный или неправильный ответ. Он появляется через 5 секунд вместе с обновленным вопросом.

Лучший код для этого :

    isCorrect == true ? answerMessage = "Correct!" : answerMessage = "Sorry, that answer was incorrect.";
  

это один:

 answerMessage = (isCorrect == true ) ?  "Correct!" : "Sorry, that answer was incorrect.";
  

Итак, проблема заключается в CheckAnswer кнопке onPressed() .Когда вы делаете

 isCorrect == true ? answerMessage = "Correct!" : answerMessage = "Sorry, that answer was incorrect.";
  

вы не вызываете setState() , чтобы пользовательский интерфейс мог соответствующим образом обновить сообщение. Вызывается setState() напрямую после задержки в 5 секунд.

Итак, ваше решение должно заключаться в добавлении a setState() сразу после вызова Future.delayed . Итак, ваш код onPressed должен выглядеть так:

 answer = myController.text;
isCorrect = (answer == answers.elementAt(element));
isCorrect == true ? answerMessage = "Correct!" : answerMessage = "Sorry, that answer was incorrect.";
Future.delayed(const Duration(milliseconds: 5000), () {
  setState(() {
    element = question.nextInt(3);
    word = questions.elementAt(element);
  });
});
setState((){}); // <-- add this line here.

  

Надеюсь, это вам поможет. Сначала вы должны вызвать setState() для проверки ответа. В вашем коде он вызывается, когда задержка заканчивается. Вот почему ваш ответ правильный или нет, и следующий вопрос обновляется одновременно.

 onPressed: (){
              answer = myController.text;
              isCorrect = (answer == answers.elementAt(element));
              isCorrect == true ? answerMessage = "Correct!" : answerMessage = "Sorry, that answer was incorrect.";
              setState(() {
          
              });
              Future.delayed(const Duration(milliseconds: 5000), () {
                setState(() {
                  element = question.nextInt(3);
                  word = questions.elementAt(element);
                });
              });
    },