在 initState 完成之前不会出现第二个屏幕

Question

我有 StatefulWidget，其中 initState() 触发异步 onInit() 函数，该函数触发顶级函数 returns 项目列表，然后 onInit 填充项目列表。然后我有 Scaffold which body should return CircularProgressIndicator until items == null 然后 Column with the items.

问题是我点击按钮导航到第二个屏幕，大约需要 3-4 秒，直到屏幕出现，当它出现时，列表就会被填充。我很确定该功能在完成之前不会让屏幕出现，但我不知道为什么？

如果它应该导航到第二个屏幕然后启动 initState 并显示加载指示器，直到 func 完成，为什么会出现这种行为？

谁能帮我解决这个问题？

Answer 1

你在 iOS 上测试这个吗？自从 Apple 弃用 OpenGL 以来，Flutter 在 Metal 引擎上的着色器缓存一直存在问题。

https://github.com/flutter/flutter/issues/32170

其次，您使用的是 FutureBuilder 吗？接下来，对于需要从某些数据源加载信息并且必须让用户等待的所有操作，请确保使用 FutureBuilder 小部件。 https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html 始终使用未来的构建器来避免任何延迟，以及任何可以异步的东西，这样做。以下是来自 flutter 团队的一些性能提示 link： https://flutter.dev/docs/perf/rendering/best-practices

我已经为您编写了一个小的实现，以演示如何实现您正在寻找的东西。

Future<List<String>> loadItemsFromSource;
@override
void initState() {
  super.initState();
    
  loadItemsFromSource = doSomeLogic();
  }

Future<List<String>> doSomeLogic(){

   //Read the results from the top level function
   //then return the results here

   return topLevelFunction(); //returns a list of Strings
}
    
    
@override
Widget build(BuildContext context) {
   return FutureBuilder<List<String>>(
          future: loadItemsFromSource,
          builder: (context, state) {
            if (state.connectionState == ConnectionState.active ||
               state.connectionState == ConnectionState.waiting) {
                 return Center(
                         child: CircularProgressIndicator(
                                backgroundColor: Colors.black,
                                valueColor: new AlwaysStoppedAnimation<Color> 
                                (Colors.orange),
                       ));
                  } else {

    //return a ListView of your results
            return new ListView.builder(
                  itemBuilder: (item, index) {
                    return Container(child: Text(state.data[index]));
                  },
                  itemCount: state.data.length);
            }
        });
    }

Answer 2

在这种情况下，因为我在 initState() 上触发的函数进行了一些繁重的计算，并且因为 Dart 是单线程语言，并且因为 CPU 与 I/O 分开，所以它开始计算，直到功能已完成，但不会构建小部件。

因此我选择使用隔离！

在 initState 完成之前不会出现第二个屏幕

Second screen doesn't appear until initState is done

dart

flutter

statefulwidget