用户登录

通过动作按钮或者拖拽手势从页面左侧滑动显示一个边栏,可以使用 Drawer 小部件。比如在点按 AppBar 小部件 leading 位置上的这个动作按钮可以显示一个边栏抽屉。

先去定义一个小部件,放在 lib/app/components 里面,名字是 app_page_aside.dart,在这个文件里定义一个小部件,名字叫 AppPageAside。

在小部件 build 方法返回的东西这里,可以使用一个  Drawer 小部件,设置一下它的 child,在这个边栏抽屉里面可以暂时用一个 Center 小部件,它的 child 是一个 Text,文字是 AppPageAside。

打开项目里的 app.dart,找到 App 小部件里使用的 Scaffold,在这个小部件里可以用 drawer 参数,对应的值新建一个 AppPageAside。

然后打开 app_page_header.dart,在这个文件里定义的小部件里面用了一个 AppBar 小部件,这里我们设置了一下它的 leading 位置上显示的小部件。

如果不特别设置的话,给 Scaffold 提供了 drawer 参数以后,就自动会在这个位置上显示一个菜单小图标,点按这个小图标可以显示页面边栏抽屉。

这里我们也可以自己定义一下 leading 位置上的小部件,点按这个图标按钮,如果想要显示边栏抽屉,可以这样,用一下 Scaffold.of(context),然后执行 openDrawer() 这个方法。

在模拟器再测试一下,点按在 AppBar 的 leading 位置上显示的这个图标按钮,会打开页面的边栏抽屉。 用拖拽手势可以关闭或者打开它。

使用边栏抽屉(Drawer)《 Flutter 2:弹窗对话 》

统计

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

社会化网络

关于

微信订阅号

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