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

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

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

Flutter - 创建横跨所有页面的侧滑菜单的更多相关文章

  1. Flutter - 创建侧滑菜单(不使用navigatior,仅改变content)

    之前写过一篇文章,Flutter - 创建横跨所有页面的侧滑菜单.这个里面中使用了Navigator.of(context).push来导航到新的页面. 这次介绍一种不使用导航,仅仅改变content ...

  2. Flutter - 创建底部导航栏

    之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...

  3. Flutter - 创建侧滑菜单

    侧滑菜单在安卓App里面非常常见,比如Gmail,Google Play,Twitter等.看下图 网上也有很多创建侧滑菜单的教程,我也来记录一下,自己学习创建Drawer的过程. 1. 创建一个空的 ...

  4. Flutter - 左右侧滑菜单:drawer和endDrawer

    侧滑菜单可以从左面滑出,也可以从右面滑出.在Scaffold中有drawer和endDrawer两个参数,分别对应左边的菜单和右边的菜单. drawer: new Drawer( child: new ...

  5. Hbuilder开发HTML5 APP之侧滑菜单

    1.思路: 其时有2个WebView,一个main是用来装主页面,一个menu是用来装菜单(为提高性能,菜单项是采用了预加载方式的,预加载时为了避免和主页面争夺资源,采用延时加载,例如: //plus ...

  6. 鸿蒙开源第三方组件——SlidingMenu_ohos侧滑菜单组件

    目录: 1.前言 2.背景 3.效果展示 4.Sample解析 5.Library解析 6.<鸿蒙开源第三方组件>文章合集 前言 基于安卓平台的SlidingMenu侧滑菜单组件(http ...

  7. Android侧滑菜单代码实现

    前两天学习了hyman老师讲的Android侧滑菜单的实现,经过自己的整理分享出来给大家学习一下 现在很多APP都有菜单侧滑的功能,本篇文章主要讲解使用自定义的HorizontalScrollView ...

  8. Xamarin.Android中使用ResideMenu实现侧滑菜单

    上次使用Xamarin.Android实现了一个比较常用的功能PullToRefresh,详情见:Xamarin. Android实现下拉刷新功能 这次将实现另外一个手机App中比较常用的功能:侧滑菜 ...

  9. Android带侧滑菜单和ToolBar的BaseActivity

    写Android的时候,可能有多个界面.在风格统一的软件中,写Activity时会有很多重复.例如我所在软工课程小组的项目:Github链接 ,里面的TaskListActivity和TeacherL ...

随机推荐

  1. Linux 系统的用户和组详解_【all】

    1.Linux 用户和用户组详解 2.Linux 文件特殊权限详解 3.Linux 文件的读写执行权限的说明 4.Linux 架构之简述企业网站 5.Linux 环境变量设置详解 6.企业生产环境用户 ...

  2. Linux setfacl/getfacl命令详解

    setfacl,命令名,设置文件访问控制列表,即ACL规则.而Acl(Access Control List)就是访问控制列表 setfacl常见命令参数 setfacl 2.2.51 -- 设定文件 ...

  3. bin/hdfs dfs命令

    appendToFile Usage: hdfs dfs -appendToFile <localsrc> ... <dst> 追加一个或者多个文件到hdfs制定文件中.也可以 ...

  4. amcharts属性

    Amcharts的特点包含: *动画或静态 *价值轴能够扭转 *线性或对数轴的价值尺度 *提前定义或定制的子弹 *定制描写叙述不论什么数据点 *点击栏目/酒吧(可用于钻孔下来图表) *梯度弥漫 *价值 ...

  5. Day1 MySql安装和基本操作

    数据和数据库 1.数据:客观事物的符号表示. 2.存储介质:纸,光盘,磁盘,u盘,云盘… 3.存储的目的:检索(查询) 存储数据量加大,导致检索的难度升高. 4.数据库(DB:database):按照 ...

  6. k8s1.8 ingress 配置

    kubectl create secret tls ingress-secret-fengjian --key /data/sslkey/cinyi.key --cert /data/sslkey/c ...

  7. etherlime-1-Quick Start

    https://etherlime.readthedocs.io/en/latest/getting-started.html Quick Start Installing全局安装 npm i -g ...

  8. flex布局中flex-shrink的计算规则

    下面代码来自MDN html部分: <p>the width of content is 500px, flex-basic of flex item is 120px.</p> ...

  9. layui弹出层之应用实例讲解

    从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...

  10. CMD centos7 安装 最新版本的docker -- dockerfire 原语 ENTRYPOINT - 导入镜像 tar mariadb Dockerfile 构建镜像

    yum update # vim /etc/yum.repos.d/docker.repo //添加以下内容 [dockerrepo] name=Docker Repository baseurl=h ...