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。

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

    原文作者:星期八再娶你
    原文地址: https://www.cnblogs.com/hupo376787/p/10027284.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞