Flutter - 创建横跨所有页面的侧滑菜单

前一篇博客讲到了如何创建侧滑菜单，但是再实际使用过程中，会发现，这个策划菜单只能在首页侧滑出来。

当导航到其他页面后，侧滑就不管用了。这也有点不符合良好的用户体验设计。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。

如果你不添加那句话，那么按返回键，则一次出现③①③②①，这个顺序显然不是我们想要的，并且用户也不希望这样导航。