时间戳

首页 > 解决方案 > 如何在异步功能后更改 UI？

flutter - 如何在异步功能后更改 UI？

问题描述

这是我想做的：
我有一个函数 InitMyContext() 需要一些时间才能完成。我想在此功能运行时显示我的加载小部件，然后显示另一个小部件。

我想出的想法是有一个全局键，当加载键的值为 0 并且在我的 InitMyContext() 结束时将键的值更改为 1。这是我现在的代码：

keyInitMyCtx = 0;

Widget build(BuildContext context) {
  initMyContext();
  if (keyInitMyCtx == 0) {
    return LoadingScreen(text: 'Loading...');
  } else {
    return WidgetScreen();
  }
}

void initMyContext() async {

  keyInitMyCtx = 0;  

  await Future.delayed(Duration(seconds: 4)); // Simulate 4 seconds of delay

  keyInitMyCtx = 1;
}


但问题是，我不能执行 SetState() 来重绘 BuildContext() 并显示 WidgetScreen，因为 SetState() 不能异步等待 initMyContext() 结束。我的想法不多了，有人有什么建议吗？
我希望我没有错过一些明显的东西，谢谢阅读

标签： flutterdart

解决方案

您不应该在build函数中等待 4 秒。您的构建功能应​​该尽可能快。

你最好像这样构造你的代码：

class YourWidget {
   initState() {
       keyInitMyCtx = 0;  
       Timer(const Duration(seconds: 4), () {
           setState(() {
              keyInitMyCtx = 1;  
           });
       });
   }
}

这样，您的构建函数将用 0 调用，然后 4 秒后用 1 调用

推荐阅读