点按评论动作显示底板评论

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

用户点按内容页面上的评论小图标的时候可以显示底板,在底板上显示内容的评论列表。

post_actions

打开 post_actions,找到在这里定义的这个 commentAction,先给这个 Icon 小部件添加一个包装,用一个 GestureDetector,然后设置一下它的 onTap,用 onTapCommentAction 来处理这个点按手势。

在上面定义一个 onTapCommentAction,在它里面可以执行一下 showModalBottomSheet 显示一个底板,提供一个 context 值是 context,再提供一个 builder ,用这个构建器返回底板小部件,这里用一下 PostBottomSheet 小部件,提供一个 post 参数。

在模拟器上测试一下,按一下这个内容页面上的评论小图标,可以显示内容底板。这里我们需要再配置一下,显示这个内容底板的时候直接打开的是评论这个标签。

post_bottom_sheet

打开 post_bottom_sheet ,给这个小部件添加一个属性,类型是 int ,名字是 tabIndex,它表示的是当前打开的标签的索引号。在构造方法里添加一个带名字的参数,this.tabIndex ,默认等于 0 。

在 initState 里面,创建这个 TabController 的时候设置了一下 initialIndex,这个参数的值现在可以换成 widget.tabIndex。

post_actions

回到 post_actions ,现在使用 PostBottomSheet 的时候,可以设置一下 tabIndex,把它的值设置成 1,这样就会显示第二个标签内容,也就是评论。

在模拟器测试一下,点按评论小图标,显示内容底板,这回显示的就是评论这个标签对应的标签视图。

post_show_fullscreen_bottom_actions

复制一下这个 showModalBottomSheet,然后打开 post_show_fullscreen_bottom_actions ,找到 commentAction,在这个 onTap 里面,把刚才复制的 showModalBottomSheet 粘贴到这里。

在模拟器,双击内容图像打开全屏模式,然后再按一下这个模式下的评论小图标,同样会显示内容底板,在上面打开的就是评论标签视图。

点按评论动作显示底板评论《 Flutter 移动端实例:评论列表 》

统计

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

社会化网络

关于

微信订阅号

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