在我的 Flutter 应用中，只有当我们触摸屏幕时才会加载页面内容。为啥？

Posted 2023-02-23

【中文标题】在我的 Flutter 应用中，只有当我们触摸屏幕时才会加载页面内容。为啥？

【英文标题】：In my flutter app, the content of the page is loaded only when we touch the screen. Why?在我的 Flutter 应用中，只有当我们触摸屏幕时才会加载页面内容。为什么？

【发布时间】：2021-06-24 15:10:08

【问题描述】：

我为这个页面使用了有状态的小部件。

首先我在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()),);

【问题讨论】：

你能显示小部件的代码吗？那么我们可以尽力帮助您。

我已经更新了代码。

So any one can explain me that why this is happening, 我不认为你提到了正在发生的事情

【参考方案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() 是一种异步方法，用于读取和返回帖子列表。 FutureBuilder 使用访问状态调用其builder，我们在加载时显示进度指示器，然后在加载时显示ListView。请注意，ListView.builder 是在可滚动列表中呈现小部件的更有效方式。