如何解决在我的 Flutter 应用程序中,只有在我们触摸屏幕时才会加载页面内容为什么?
我在这个页面上使用了有状态的 Widget。
首先我在 initState 中运行该函数,将数据以 List 的形式存储到变量中,然后以列表视图的形式输出数据。
另外,我在 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()),);
解决方法
异步读取和显示数据的一个好方法是使用 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
是在可滚动列表中呈现小部件的更有效方式。