用户登录

打开项目里 post_header,先修改一下这个小部件,给它添加一个属性,类型是 bool,名字是 hideAvatar,再添加一个属性,类型是 bool 名字是 hideUserName。在构造方法里面,添加一个 this.hideAvatar ,默认值是 false,再添加一个 this.hideUserName ,默认值是 false 。

然后找到使用 UserAvatar 这个地方,这里可以判断一下 !hideAvatar,这样如果 hideAvatar 是 true,就会隐藏这个 UserAvatar 小部件。同样可以处理一下这个 SizedBox,判断 !hideAvatar。

再找到用户名这个文本小部件,判断一下 !hideUserName。如果 userName 的值是 true,就会隐藏用户名。

post_show_title

新建一个文件,放在 lib/post/show/components 里面,名字是 post_show_title.dart ,在文件里定义一个小部件,名字是 PostShowTitle,里面添加一个属性,类型是 Post 名字是 post,一个构造方法 PostShowTitle,给它一个参数,this.post。

在小部件里面可以用一个 SliverToBoxAdapter,它的 child 是一个 Container,设置一下它的 padding ,值是 EdgeInsets.only,top 是 24,right 是 8 ,bottom 是 16,left 是 24。

小部件的 child 可以用一个 PostHeader 小部件,post 设置成 post,再把 hideAvatar 设置成 true,hideUserName 也设置成 true。

打开 post_content_view,在 slivers 这里添加一个 PostShowTitle ,给它一个 post 参数。

post_show_content

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

小部件里用一个 SliverToBoxAdapter,它的 child 是个 Container,用 padding 设置一下边距,EdgeInsets.only ,right 是 8,bottom 是 24,left 是 24。小部件的 child 用一下 PostContent 小部件,post 参数设置成 post。

在 post_content_view 这里,再添加一个 PostShowContent ,提供一个 post 参数。

这里使用这个 PostShowContent 之前可以判断一下 post.content 是不是不等于 null。

post_show_tags

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

小部件里用一个 SliverToBoxAdapter,它的 child 是个 Container,用 padding 设置一下边距,EdgeInsets.only ,right 是 8,left 是 24。小部件的 child 用一下 PostTags 小部件,tags 参数设置成 post.tags 或者一个空白的数组。

在 post_content_view 这里,判断一下 post.tags 是不是不等于 null,如果不是这里就再添加一个 PostShowTags ,提供一个 post 参数。

如果界面出错,可以重新启动一下应用。 然后打开一个内容项目,观察一下现在这个内容页面。

定义内容页面相关小部件《 Flutter 移动端实例:内容页面 》

统计

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

社会化网络

关于

微信订阅号

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