如何更新一个变量以显示一些文本，有延迟，然后更新另一个也显示文本的变量？

Question

我目前正在尝试使用 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' 只是一个随机数，插入两个数组以生成问题和预期答案.

我使用 TextField 小部件中的控制器获取用户的答案，然后将其与 'answers' 数组中的相应元素进行比较。根据上述条件是真还是假，我更新 'answerMessage' 变量以在屏幕上显示答案是否正确。在此之后，我尝试在 'element' 变量被赋予一个新的随机整数值（对应于从我的 'questions' 数组中随机选择的一个新问题）之前延迟大约 5 秒'word' 屏幕上显示的变量已更新以反映新问题。我找不到我的代码有任何问题，但出于某种原因，我的程序甚至在显示用户是否正确之前等待 5 秒，然后立即更新问题，这违背了延迟的目的延迟是为了让用户有一些时间在继续下一个问题之前查看他们的答案是否正确。

Answer 1

所以问题出在CheckAnswer按钮的onPressed()。当你在做

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

您没有调用 setState()，以便 UI 可以相应地更新消息。 setState()延迟5秒后直接调用

所以您的解决方案应该是在调用 Future.delayed 之后立即添加一个 setState()。所以你在 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.

Answer 2

希望对您有所帮助。您应该先调用 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);
                });
              });
    },

Answer 3

您的问题很明确，您需要在 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.";

如何更新一个变量以显示一些文本，有延迟，然后更新另一个也显示文本的变量？

How can I update a variable to display some text, have a delay, then update another variable also displaying text?

random

delay

flutter