用户登录

在 lib/app/toolbar/components 里面新建一个文件,名字是 post_index_menu.dart,在这个文件里定义一个小部件,名字是 PostIndexMenu 。文件顶部导入一个包,package:provider/provider.dart。

小部件 return 的东西可以用一个 Observer,设置一下它的 builder,一个 context 参数,在这个 builder 里面,声明一个 postIndexStore,值是 context.read,类型是 PostIndexStore。下面可以再声明一个 sort,值是 postIndexStore 里的 sort ,再声明一个 setSort,值是 postIndexStore 里的 setSort。

return 的东西是一个 Row 小部件,在它的 children 里面,添加一个 AppTextMenuItem ,label 是最近,isActive,判断一下 sort 是不是等于 latest ,如果是这个 isActive 就是 true。再设置一下 onTap 这个回调,可以执行一下 setSort,把 sort 这个数据的值设置成 latest 。

复制一份这个菜单项目,在它们之间添加一个 SizedBox,width 是 24 。 修改一下,label 是 热门,isActive 的值可以判断一下 sort 是不是等于 most_comments ,onTap 回调执行的是 setSort,参数值是 most_comments。

app_toolbar.dart

打开 app_toolbar.dart,修改一下 primary 的值,换成 PostIndexMenu 。

观察

观察一下应用界面,现在这里会显示一个菜单,点按菜单项目会修改 postIndexSotre 里的 sort 这个数据的值,这个被点的菜单项目会变成激活状态。

定义内容列表页面菜单(PostIndexMenu)《 Flutter 移动端实例:内容列表 》

统计

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

社会化网络

关于

微信订阅号

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