如何解决结合futurebuilder和streambuilder时,Flutter中的Listview构建器滚动不流畅
我为应用程序中的每个帖子使用一个评论页面,我使用 streambuilder 从Firebase数据库中获取评论。对于每个评论,我都会显示用户的图像及其评论。
要获取用户的图像,我需要使用 futurebuilder 在 userData 文档中找到用户,然后获取图像URL并显示它(用户可以随时更改其图像配置文件,名称等,每次我想在任何地方显示其名称或图像时,我都必须从 userData 文档中获取更新的图像)。这是我使用的代码:
StreamBuilder(
stream: Firestore.instance
.collection('posts')
.document(postId)
.collection('postComments')
.orderBy(
'createdAt',descending: true,)
.snapshots(),builder: (ctx,chatSnapshot) {
if (chatSnapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),);
}
final chatDocs = chatSnapshot.data.documents;
return ListView.builder(
shrinkWrap: true,reverse: true,itemCount: chatDocs.length,itemBuilder: (ctx,index) {
return FutureBuilder(
future: Firestore.instance
.collection('userData')
.document(userId)
.get(),builder: (context,userSnapshot) {
if (userSnapshot.connectionState == ConnectionState.waiting) {
return Container(
child: CircularProgressIndicator(
valueColor:
AlwaysStoppedAnimation(Color.fromRGBO(0,0)),),);
}
final userData = userSnapshot.data;
User commentor = User.fromDocument(userData);
return Padding(
padding: const EdgeInsets.all(20.0),child: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
commentor.userImage,Padding(
padding: const EdgeInsets.all(8.0),child: Container(
width: MediaQuery.of(context).size.width * 0.5,padding: EdgeInsets.all(10),color: Colors.grey,child: Text(
chatDocs[index]['comment'],style: TextStyle(
color: Colors.black,textAlign: TextAlign.start,],);
},);
},);
},);
当我从下到上滚动(最新到较旧的注释)时,滚动非常顺利,没有问题,但是当我到达列表的末尾(最旧的注释)并开始向下滚动时,注释之间的怪异跳转和滚动至少在前几个滚动中并不平滑。
我有This screencapture here,它显示了奇怪的滚动行为。为什么会这样?
谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。