应显示一串数字，但只显示最后一个答案

【问题标题】：A sequence of numbers should be displayed, but only the last one appears应显示一串数字，但只显示最后一个
【发布时间】：2021-06-08 17:39:02
【问题描述】：

我有一个显示数字的容器。我希望在单击随机按钮后，每 1000 毫秒后显示 10 个数字。不幸的是，只有最后生成的数字会在 10 秒后显示。

ElevatedButton(
  onPressed: () {
    for (int i = 0; i <= 10; i++) {
      setState(() {
        randomNum = Random().nextInt(19) + 1;
      });
      sleep(Duration(milliseconds: 1000));
    }
  },
  child: const Text('Shuffle')),

【问题讨论】：

标签： flutter dart

【解决方案1】：

您不应该使用 sleep 来延迟 Flutter 应用程序（通常）。

sleep() 阻塞当前隔离（大致类似于线程）。这意味着当sleep() 正在发生时，该隔离上的其他任何事情都不会发生。在 Flutter 应用程序中，这也意味着在 sleep() 完成之前不会更新。

相反，您可以使用Future.delayed(duration) 来异步等待一段时间。 Future.delayed 不会停止当前隔离上的所有执行，而是允许事情在后台发生（包括 UI 更新），并在持续时间过去后恢复。

为了实际等待持续时间，您应该将您的函数设为async，这样您就可以使用await 关键字来实际等待该时间。例如：

onPressed: () async {  // mark function as async to allow await
  for (int i = 0; i < 10; i++) {
    setState(() { ... });  // set randomNum
  }
  await Future.delayed(Duration(seconds: 1));  // notice the await keyword
}

这将允许 Flutter 在您的函数运行时重新绘制 UI。

附：如果你使用supercharged包，你可以使用：

await 1.seconds.delay;

而不是

await Future.delayed(Duration(seconds: 1));

【讨论】：

感谢您的解释。