firebase - 在我的 Flutter 应用中,只有当我们触摸屏幕时才会加载页面内容。为什么?
问题描述
我为此页面使用了有状态的小部件。
首先我在 initState 中运行函数将数据作为 List 存储到变量中,然后以 listview 的形式输出数据。
我还使用了异步和等待 initState 中的函数。
我正在使用 firebase 通过颤振应用程序将数据加载到其中。
所以当我触摸屏幕时页面的内容被加载,在触摸屏幕之前它只是黑色的空白屏幕。但是刚一触屏,突然就以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()),);
解决方案
异步读取和显示数据的一个好方法是使用FutureBuilder
with 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
是在可滚动列表中呈现小部件的更有效方式。
推荐阅读
- python - 在 python 中使用 selenium webdriver 滚动网页
- python - ruamel.yaml 如何引用包含冒号的字符串?
- python - 为什么在 Python 中选择 IDE 无关紧要,而在 C++ 中却很重要?
- r - `stat_compare_means()` 中的计算失败:`mutate()` 输入 `p` 有问题。x 所有观测值都在同一组中
- r - 如何在展开所有子行的情况下启动 DT 数据表?
- prometheus - Prometheus/Thanos -> 我们可以在 Thanos 查询器商店中添加商店特定的 TLS 吗?本质上在同一个存储数组中有 http 和 https
- node.js - MongoDB 将 Sting id 属性从请求 POST 正文转换为 ObjectId
- c# - 未映射的属性和 OData 4 端点无法获取要在前端显示的属性
- aiml - 为什么我不能在 Pandorabots 上发布我的 AIML 聊天机器人?
- node.js - 我如何让不和谐的机器人以某种方式回复我的命令