新建一个文件,放在 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 。
测试
在模拟器测试一下,点按这个返回小箭头,可以返回到这个内容列表页面。