前一篇博客讲到了如何创建侧滑菜单,但是再实际使用过程中,会发现,这个策划菜单只能在首页侧滑出来。
当导航到其他页面后,侧滑就不管用了。这也有点不符合良好的用户体验设计。Google Play就是很好的例子,她就是可以几乎在所有的页面上侧滑出来(一些特定的页面除外)。
下面看看如何来实现这一功能。
其实原理很简单,就是在每一个page里面都加上drawer。
我的这个是比较笨的方法,如果谁有更好用的,请告诉我。
1.首先将drawer封装成一个widget:drawerEx
class drawerEx extends StatelessWidget { @override Widget build(BuildContext context) { return new Drawer( child: new ListView( children: <Widget>[ new UserAccountsDrawerHeader( accountName: Text("小薇识花"), accountEmail: Text("flutter@gmail.com"), currentAccountPicture: new GestureDetector( onTap: () => Fluttertoast.showToast( msg: "flutter@gmail.com", toastLength: Toast.LENGTH_LONG), child: new CircleAvatar( backgroundImage: new ExactAssetImage("images/Head0.png"), ), ), decoration: new BoxDecoration( image: new DecorationImage( fit: BoxFit.fill, image: new ExactAssetImage("images/mm.jpg"),),), ), new ListTile( title: new Text("识花"), trailing: new Icon(Icons.local_florist), onTap: (){ Navigator.of(context).pop(); Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new HomePage())); Navigator.pushNamedAndRemoveUntil(context, '/', (_) => false); }, ), new ListTile( title: new Text("搜索"), trailing: new Icon(Icons.search), onTap: (){ Navigator.of(context).pop(); Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new SearchPage('Search Web'))); }, ), new Divider(), new ListTile( title: new Text("设置"), trailing: new Icon(Icons.settings), onTap: (){ Navigator.of(context).pop(); Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new SettingsPage('Settings Center'))); }, ), ], ), ); }
2.在各个页面pages的Scaffold里面引用drawerEx
class SettingsPage extends StatelessWidget{ final String pageText; SettingsPage(this.pageText); @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Settings Center'), ), drawer: new drawerEx(),//Refer your drawerEx widget body: new Center( child: new Text('Hello, Settings!'), ), ); } }
3.One more thing
细心的可能会发现在drawer的一个ListTile里面,也就是首页,多了一句话
Navigator.pushNamedAndRemoveUntil(context, '/', (_) => false);
这句话的作用是当导航到首页的时候,导航历史会清除。
比如,你导航了
首页——》搜索——》设置——》首页——》设置
① ② ③ ① ③
此时,你按下返回键,则回到了“首页”,在点击返回键,则退出App。
如果你不添加那句话,那么按返回键,则一次出现③①③②①,这个顺序显然不是我们想要的,并且用户也不希望这样导航。