Question

对于上下文，假设我有Flutter代码，该代码在从API提取代码时显示CircularProgressIndicator：

Future<void> getItems() async {
  setState(ViewState.Busy);
  items = await _api.getItems();
  setState(ViewState.Idle);
}

为使CircularProgressIndicator不会仅显示一秒钟的时间（我发现这会干扰相关的动画流），因此我希望使该指示器显示最短的时间。

我思考我可以使用Future API或计时器解决此问题，方法是设置将来HTTP请求所需的 minimum 时间。我该如何实现这一目标？

Answer 1

最简单的想法是添加布尔值，以检查计时器和响应是否都已执行

Future<void> getItems() async {

  setState(ViewState.Busy);

  bool gotResponse = false;
  bool timerExpired = false;

  Future.delayed(Duration(seconds: 1)).then((_) {
    timerExpired = true;
    if (gotResponse) setState(ViewState.Idle);
  });

  items = await _api.getItems().then((items) {
    gotResponse = true;
    if (timerExpired) setState(ViewState.Idle);
  });

}

基本思想是仅在两个异步操作均已完成并且相应的布尔值为setState(ViewState.Idle)时才调用true

Answer 2

您可以在getTimes函数中执行此操作：

Future<void> getItems() async {
  setState(ViewState.Busy);
  await Future.delayed(Duration(seconds: amountOfSeconds));
  items = await _api.getItems();
  setState(ViewState.Idle);
}

这里将等待x秒。

我希望这会有所帮助。

Answer 3

我经常使用这种模式。将来等待接受一份期货清单。它并行执行它们，返回都将完成。我认为它看起来更干净。

https://api.dartlang.org/stable/2.3.1/dart-async/Future/wait.html

  List<Future> futures = [];
  futures.add(Future.delayed(Duration(seconds: 1)));
  futures.add(_api.getItems());
  await Future.wait(futures);

Answer 4

我为此创建并使用了以下扩展方法：

extension FutureExtensions<T> on Future<T> {
  Future<T> withMinDuration({
    Duration duration = const Duration(milliseconds: 400),
  }) async {
    final delayFuture = Future<void>.delayed(duration);
    await Future.wait([this, delayFuture]);
    return this;
  }
}

有没有办法使CircularProgressIndicator或Future持续最短的时间（发出HTTP请求时）？

4 个答案: