评论列表项目里面可以显示评论的回复数量,还有回复或者编辑评论用的一些按钮等等,这些东西可以单独放在一个小部件里。
新建一个文件,放在 lib/comment/index/components 里面,名字是 comment_list_item_actions.dart ,文件里定义一个小部件,名字是 CommentListItemActions ,添加一个属性,类型是 Comment 名字是 comment,在构造方法里添加一个参数,this.comment 。
小部件的 build 方法里声明一个 totalReplies,值是一个 GestureDetector,设置一下 onTap,暂时提供一个空白的函数。它的 child 是一个 Container,用 padding 设置一下边距,EdgeInsets.only,right 是 8 。
child 是一个 Row 小部件,小部件的 children 里面添加一个 Text 小部件,文字是 comment.totalReplies 后面加上条回复这几个字。
然后再添加一个小图标,小图标用的是 Icons.arrow_drop_down。下面声明一个 showTotalReplies,值可以判断一下 comment.totalReplies != 0 。
在小部件的这个容器里面,把它的 child 设置成一个 Row 小部件,它的 children 里面判断一下 showTotalReplies,然后添加一个 totalReplies。
comment_list_item
打开 comment_list_item,修改一下 actions 的值,新建一个 CommentListItemActions ,提供一个 comment 参数。
观察
观察一下评论列表,如果评论有回复的话,就会在评论列表项目里面显示这条评论被回复的数量。