等待子树小部件完成加载异步数据，然后再显示它们

Question

我的应用中有多个小部件组件，每个组件都需要来自服务器的不同数据。在组件的 initState 上，我获取它需要的数据。

当应用程序打开时，我会从服务器获取要显示的组件。示例：仅显示组件 1 和 3。如何等待 1 和 3 加载而不显示它们（仅显示加载器）并且当两者都完成加载时，我会显示它们或显示错误页面？

Answer 1

您可以使用三元来验证数据是否准备就绪，如果没有，您可以只显示CircleProgressIndicator，如下所示：

        class _LoadingComponentsState extends State<LoadingComponents> {
          bool waiting = true;

          loadingAsyncTask() async {
            //.. your logic

            setState(() {
              waiting = false;
            });
          }

          @override
          void initState() {
            loadingAsyncTask();
            super.initState();
          }

          @override
          Widget build(BuildContext context) {
            return Container(
              child: waiting
                  ? Center(
                      child: CircularProgressIndicator(),
                    )
                  : ListView(
                      children: [
                        //your data...
                      ],
                    ),
            );
          }
        }