用户登录

在工具栏上可以再用一个切换内容列表布局用的工具,在项目下面新建一个文件,放在 lib/app/toolbar/components 里面,名字是 post_list_layout_switcher.dart 。

在文件里定义一个小部件,名字是 PostListLayoutSwitcher ,文件顶部可以导入一个包,导入的是 package:provider/provider.dart 。

然后在小部件里用一个 Observer,设置一下它的 builder ,一个 context 参数,在这个 builder 里面声明一个 postIndexStore,值是 context.read,类型是 PostIndexStore,下面声明一个 layout,值是 postIndexStore.layout,再声明一个 setLayout,等于 postIndexStore.setLayout 。

下面声明一个 stackIcon ,值可以判断一下 layout 是不是等于 PostListLayout.stack ,如果是,这个小图标就是 Icon,用一下 Icons.view_agenda ,不然的话,这个小图标可以用一下 Icons.view_agenda_outlined 。

声明一个 gridIcon ,判断 layout 是不是等于 PostListLayout.grid,如果是这个小图标就是 Icons.auto_awesome_mosaic ,如果不是,小图标可以用一下 Icons.auto_awesome_mosaic_outlined 。

小部件 return 的是一个 Row 小部件,设置一下主轴对齐,设置成 MainAxisAlignment.end 。它的 children ,可以添加一个 GestureDetector,child 是 stackIcon ,onTap 可以设置一下 setLayout,参数值是 PostListLayout.stack,这样点按这个小图标的时候,就会把 layout 设置成 PostListLayout.stack。

复制一份,在它们之间添加一个 SizedBox,width 是 8 ,修改一下这个 GestureDetector 的 child,设置成 gridIcon,点按的时候执行 setLayout,参数值是 PostListLayout.grid 。

app_toolbar.dart

打开 app_toolbar.dart,修改一下 secondary 的值,设置成刚才我们定义的 PostListLayoutSwitcher 这个小部件。

测试

再测试一下,现在这个工具栏上会显示内容列表布局切换器,点按小图标可以切换内容列表的布局。

内容列表布局切换器(PostListLayoutSwitcher)《 Flutter 移动端实例:内容列表 》

统计

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

社会化网络

关于

微信订阅号

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