用户登录

新建一个文件,放在 lib/post/show/header 里面,名字是 post_show_header.dart,在这个文件里定义一个小部件名字是 PostShowHeader。添加一个属性,类型是 Post 名字是 post,再添加一个构造方法 PostShowHeader,一个参数,this.post 。

打开 post_content_view,在这个 slivers 里面,添加一个 PostShowHeader 小部件。

回到 post_show_header,在这个小部件里面用一个 SliverAppBar 小部件,然后把它的 automaticallyImplyLeading 设置成 false ,禁用自动添加 leading 位置的小部件。 expandedHeight ,展开的高度设置成 64 ,titleSpacing 设置成 0。

然后可以定义一下 leading 位置上的小部件。

post_show_header_leading.dart

新建一个文件,放在 lib/post/show/header/components 里面,名字是 post_show_header_leading.dart,定义一个小部件,名字是 PostShowHeaderLeading。

在 post_show_header 这个小部件里面,设置一下 leading 参数,值就是刚才我们创建的这个 PostShowHeaderLeading。

回来继续编辑这个小部件,这里可以先用一个 GestureDetector ,设置一下 onTap ,一个函数,执行一下 Navigator.maybePop,给它一个 context 。

它的 child 可以用一个 Container 小部件,它的 child 是个 Icon ,小图标用一下 Icons.arrow_back ,把 size 设置成 18 ,再用 color 设置一下颜色,Theme.of(context).textTheme.bodyText2!.color 。

测试

在模拟器测试一下,点按这个返回小箭头,可以返回到这个内容列表页面。

内容头部(PostShowHeader)《 Flutter 移动端实例:内容页面 》

统计

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

社会化网络

关于

微信订阅号

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