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)
• duration和curve 如果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,