在我的 flutter 应用程序中，只有当我们触摸屏幕时才会加载页面内容。为什么？

Question

我为此页面使用了有状态的 Widget。

首先我运行initState中的函数将数据作为List存储到变量中，然后我将数据以listview的形式输出。

此外，我还在 initState 中使用了 async 和 await 函数。

我正在使用 firebase 通过 flutter 应用加载数据。
所以当我触摸屏幕时页面的内容被加载，在触摸屏幕之前它只是黑色空白屏幕。但是一触屏，突然以ListView的形式加载了数据。所以我希望即使不首先触摸屏幕也应该加载数据。

所以任何人都可以向我解释为什么会发生这种情况，以及如何阻止这种情况。我想在后台下载和处理数据后立即加载数据。

代码：-

    void initState(){
    super.initState();
    findFollowers();  }
    findFollowers({bool clearCachedData = false}) async
  {
    if(clearCachedData) {
      setState(() {
        followersResults = null;
      });
    }
    List<UserResult> searchFollowersResult = [];
    QuerySnapshot allFollowers = await followersRefrence.doc(widget.userProfileId).collection("userFollowers").limit(limit).get();

    allFollowers.docs.forEach((document) async {
      QuerySnapshot ds = await usersReference.where("id", isEqualTo: document.id).get();
      ds.docs.forEach((docu) {
        User eachUser = User.fromDocument(docu);
        UserResult userResult = UserResult(eachUser);
        searchFollowersResult.add(userResult);
      });
    });

    setState(() {
      followersResults = searchFollowersResult;
      if(allFollowers!=null)
      {
        if(allFollowers.docs.length != 0)
        {
          startAfter = allFollowers.docs[allFollowers.docs.length-1];
        }
      }
    });
  }

    return ListView(children: followersResults, controller: scrollController,
        physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),);

Answer 1

异步读取和显示数据的一个好方法是使用 FutureBuilder 和 ListView.builder，例如

  Widget build(BuildContext context) {
    log.v('build called');
    final postService = Provider.of<PostService>(context);
    return FutureBuilder(
      future: postService.getPosts(),
      builder: (ctx, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting)
          return Center(child: CircularProgressIndicator());
        final List<Post> posts = snapshot.data;
        return ListView.builder(
          itemCount: posts.length,
          itemBuilder: (context, index) {
          ProjectModel post = posts.data[index];
          return Column(

这里的 postService.getPosts() 是一个异步读取方法，return 是一个帖子列表。 FutureBuilder 使用访问状态调用其 builder，我们在加载时显示进度指示器，然后在加载时显示 ListView。请注意，ListView.builder 是在可滚动列表中呈现小部件的更有效方式。

在我的 flutter 应用程序中，只有当我们触摸屏幕时才会加载页面内容。为什么？

In my flutter app, the content of the page is loaded only when we touch the screen. Why?

firebase

flutter

google-cloud-firestore

flutter-test

flutter-dependencies