下面我们创建一个评论列表还有评论列表项目小部件,新建一个文件,放在 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
在小部件里声明一个 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。
观察
观察一下内容评论,现在这里仍然会显示这个内容相关的评论内容。