侧滑菜单在安卓App里面非常常见

抽屉通常与Scaffold.drawer属性一起使用。抽屉的子项通常是ListView,其第一个子项是DrawerHeader ,它显示有关当前用户的状态信息。其余的抽屉儿童往往与构建ListTile S,经常有结束AboutListTile。

可以通过调用Navigator.pop关闭打开的抽屉

效果图:

代码:

/***
* Drwaer 侧滑
*/ class DrawerDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new DrawerMain();
}
} class DrawerMain extends State<DrawerDemo> { @override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text("Drawer"),
),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: Text("切切歆语"),
accountEmail: Text("zhangqie@foxmail.com"),
currentAccountPicture: new GestureDetector(
child: new CircleAvatar(
backgroundImage: new ExactAssetImage("images/pic2.png"),
),
),
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.fill,
image: new ExactAssetImage("images/lake.jpg"),
),
),
),
new ListTile(
title: new Text("小花"),
trailing: new Icon(Icons.local_florist),
),
new ListTile(
title: new Text("搜索"),
trailing: new Icon(Icons.search),
onTap: () {},
),
new Divider(),//横线
new ListTile(
title: new Text("设置"),
trailing: new Icon(Icons.settings),
onTap: () {
Navigator.of(context).pop();//点击关闭侧滑
_neverSatisfied();
},
),
],
),
),
body: new Center(
child: new Text(" Hello "),
),
);
}
}

官方文档
https://docs.flutter.io/flutter/material/Drawer-class.html

Flutter -------- Drawer侧滑的更多相关文章

  1. Flutter Drawer 侧边栏、以及侧边栏内 容布局

    Flutter Drawer 侧边栏 在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边 栏.侧边栏默认是隐藏的,我们可以通过手指滑动显示 ...

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

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

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

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

  4. Flutter - 创建侧滑菜单

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

  5. flutter drawer 自定义图标 icon 手动打开drawer

    方法1:GlobalKey import "package:flutter/material.dart"; class Test extends StatefulWidget { ...

  6. Flutter——Drawer、DrawerHeader、UserAccountsDrawerHeader组件(侧边栏组件)

    在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏. ...

  7. Flutter -------- 新手 WanAndroid 项目练习

    一个简单Flutter项目wanandroid,先前用Kotlin来开发过,适合新手练习. 用到的库 包含功能: http+数据解析 网络请求数据列表展示 Banner轮播 WebView跳转详情 D ...

  8. Drawer 侧边栏、以及侧边栏内 容布局

    一.Flutter Drawer 侧边栏 在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显 ...

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

    前一篇博客讲到了如何创建侧滑菜单,但是再实际使用过程中,会发现,这个策划菜单只能在首页侧滑出来. 当导航到其他页面后,侧滑就不管用了.这也有点不符合良好的用户体验设计.Google Play就是很好的 ...

随机推荐

  1. Vue移动组件库Mint UI的安装与使用

    一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...

  2. 【编程开发】Python隐藏属性——使用双下划线标识私有属性,外部不可直接访问

           from:https://zhuanlan.zhihu.com/p/30553607 小编在最初使用上Python之后,就一发不可收拾,人生苦短.我用Python,不光是因为其优雅简洁, ...

  3. Ajax -02 -JQuery+Servlet -实现页面点击刷出表格数据

    demo功能分析 jquery 的js文件需要导入,json的三个文件需要导入,不然writeValueAsString 会转化成JsonArray(json 数组)失败 $("#mytbo ...

  4. Spring -09 -在Spring工程 中加载 properties 文件 -为某个属性添加注解赋初值

    1.在src 下新建 xxx.properties 文件,不要任意加空格,注明jdbc等标识名!2.在spring 配置文件中先引入xmlns:context,在下面添加2.1如果需要记载多个配置文件 ...

  5. 2.遍历XML即添加修改节点

    1.xml <?xml version="1.0" encoding="utf-8" ?> <stories> <story ac ...

  6. Django之路——6 Django的模型层(二)

    多表操作 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对 ...

  7. PHP——最新号码归属地数据库

    前言 最近在忙的一个项目,为了数据安全,不能够使用任何第三方的接口~ 号码库 | https://github.com/wangyang0210/Phone-Number-Range 代码 其实就是一 ...

  8. nginx+keepalived高可用 (主从+双主)

    1.Nginx+keepalived 主从配置这种方案,使用一个vip地址,前端使用2台机器,一台做主,一台做备,但同时只有一台机器工作,另一台备份机器在主机器不出现故障的时候,永远处于浪费状态,对于 ...

  9. 找回IntelliJ IDEA中丢失的Run Dashboard视图

    一般项目中包含多个springboot项目的时候都会出现run dashboard视图,但如果一开始它提示的时候,不点击展示,就再也找不到这个视图了,给我们后续启动一个一个的启动项目带来了很大的不便, ...

  10. vue中超简单的方法实现点击一个按钮出现弹框,点击弹框外关闭弹框

    效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...