通过动作按钮或者拖拽手势从页面左侧滑动显示一个边栏,可以使用 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 位置上显示的这个图标按钮,会打开页面的边栏抽屉。 用拖拽手势可以关闭或者打开它。