Flutter 抽屉菜单-Drawer使用

Drawer

Drawer是Android开发中Material风格常用的设计,就是我们常说的“抽屉”效果,一个从侧边栏拉出来的导航面板。

在Flutter使用Material风格,最为常用的组件之一就是Scaffold了;Scaffold的drawer属性是一个Widget类型的组件,从左侧边栏拉出,通常就是用一个Drawer对象实现(Scaffold的endDrawer属性定义了一个从右侧边栏拉出的导航面板);

如果没有设置AppBar的leading属性,则当使用Drawer的时候会自动显示一个IconButton来告诉用户有侧边栏(在 Android 上通常是显示为三个横的图标)。

Drawer的child属性定义了其展示的内容,通常是用一个 ListView来实现,而在ListView最上面通常会有个 DrawerHeader来设置当前用户的基本信息,最常用的一个具体的 DrawerHeader 是 UserAccountsDrawerHeader 。

DrawerHeader的使用

  • decoration header区域的decoration,通常用来设置背景颜色或者背景图片
  • margin Header四周的间隙 默认值:EdgeInsets.only(bottom: 8.0)
  • padding Header里面内容控件的padding值,如果child为null,则这个值无效 默认值:const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0)
  • durationcurve 如果decoration发生了变化,则会使用 curve设置的变化曲线和duration设置的动画时间来做一个切换动画
  • child Header里面所显示的内容控件
DrawerHeader(
  decoration: BoxDecoration(
    color: Colors.lightBlueAccent,
  ),
  child: Center(
    child: SizedBox(
      width: 60.0,
      height: 60.0,
      child: CircleAvatar(
        child: Text('R'),
      ),
    ),
  ),
),
image.png

UserAccountsDrawerHeader的使用

如果想在DrawerHeader中显示用户账户信息,比如类似于 Gmail 的 联系人头像、用户名、Email 等信息,则可以使用 UserAccountsDrawerHeader这个特殊的DrawerHeader。

UserAccountsDrawerHeader(
  //通常用来设置背景颜色或者背景图片
  decoration: BoxDecoration(
    image: DecorationImage(
        //设置UserAccountsDrawerHeader背景图
        image: NetworkImage(
            'http://img02.tooopen.com/images/20131212/sy_51552288528.jpg'),
        fit: BoxFit.cover),
  ),
  //当前用户的名字
  accountName: Text('我是Drawer'),
  //当前用户的Email
  accountEmail: Text('wo shi Email'),
  //用来设置当前用户的头像
  currentAccountPicture: CircleAvatar(
    backgroundImage: NetworkImage(
        'http://b-ssl.duitang.com/uploads/item/201507/04/20150704212949_PSfNZ.jpeg'),
  ),
  //当 accountName 或者 accountEmail 被点击的时候所触发的回调函数,可以用来显示其他额外的信息
  // onDetailsPressed: () {
  //   print("onDetailsPressed");
  // },
  //用来设置当前用户的其他账号的头像(最多显示三个)
  // otherAccountsPictures: <Widget>[
  //   CircleAvatar(
  //     backgroundImage: NetworkImage(
  //         'http://img02.tooopen.com/images/20131212/sy_51552288528.jpg'),
  //   ),
  // ],
),

在菜单 Item 部分我们使用 ListTile 来处理,左边是一个图标右边是文字的样式。

ListTile(
  leading: Icon(Icons.settings),
  title: Text('设置'),
),
Divider(), //分割线
ListTile(
  leading: Icon(Icons.close),
  title: Text('关闭'),
  onTap: () => Navigator.pop(context), // 关闭抽屉
)
效果图

手动打开与关闭Drawer抽屉

代码中打开抽屉菜单的方法在ScaffoldState中,通过Scaffold.of(context)可以获取父级最近的Scaffold 组件的State对象。

Scaffold.of(context).openDrawer(), // 打开抽屉

Navigator.pop(context), // 关闭抽屉

leading: Builder(
  builder: (context) => GestureDetector(
    child: Padding(
      padding: EdgeInsets.all(8.0),
      child: new Icon(Icons.home),
    ),
    onTap: () => Scaffold.of(context).openDrawer(), // 打开抽屉
  ),
),



ListTile(
  leading: Icon(Icons.close),
  title: Text('关闭'),
  onTap: () => Navigator.pop(context), // 关闭抽屉
)

禁止手势侧滑出Drawer

默认是带手势侧滑的,那如何禁止手势侧滑出Drawer,我们只需要修改一个属性即可

drawerEdgeDragWidth: 0.0,
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,029评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,238评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,576评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,214评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,324评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,392评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,416评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,196评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,631评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,767评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,410评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2 351

推荐阅读更多精彩内容