用户登录

下面我们创建一个评论列表还有评论列表项目小部件,新建一个文件,放在 lib/comment/index/components 里面,名字是 comment_list_item.dart 。

文件里定义一个小部件,名字是 CommentListItem ,添加一个属性,类型是 Comment 名字是 comment ,在构建方法里添加一个参数,this.comment 。

小部件的容器里面这个 Text 显示的文字换成 comment.content 。

comment_list

再创建一个文件,放在 lib/comment/index/components 里面,名字是 comment_list.dart 。文件里定义一个小部件,名字是 CommentList 。

添加一个属性,类型是 ObservableList 名字是 comments ,再添加一个 bool 类型的 loading ,表示是否正在加载列表数据。在构造方法里添加一个 this.comments,再添加一个带名字的参数,this.loading,默认值是 false。

在小部件里声明一个 list,值可以用一个 SliverList,添加一个 delegate,值是 SliverChildBuilderDelegate,一个构建器,context,index 两个参数,声明一个 comment ,值是 comments 方括号 index,return 的东西可以新建一个 CommentListItem 提供一个 comment 参数。再添加一个 childCount值是 comments.length。

声明一个 Widget ,名字是 view,让它等于一个 SliverFillRemaining,它的 child 可以新建一个 AppNoContent 小部件。

下面判断一下,如果 comments.isNotEmpty 并且 !loading,设置 view,让它等于 list 。最后 return 这个 view 。

comment_index

打开 comment_index,剪切一下 slivers 里面的这个 SliverList,换成一个 CommentList 小部件,提供一个 comments,再把 loading 设置成 store.loading。

观察

观察一下内容评论,现在这里仍然会显示这个内容相关的评论内容。

评论列表小部件(CommentList)《 Flutter 移动端实例:评论列表 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点