Flutter Drawer

Flutter Drawer 侧滑菜单、抽屉

Drawer 与Scaffold一起使用。是Scaffold中drawer属性。drawer通常是一个ListView，它的第一个子视图是一个DrawerHeader，但我们通常使用UserAccountsDrawerHeader显示当前用户的状态信息。其余的drawer子元素通常由ListTile构造，通常以AboutListTile结束。

可以使用Navigator.pop(context)主动关闭Drawer。

参数讲解

属性	说明
Drawer
elevation	背景高度
child	子组件
semanticLabel	标签
UserAccountsDrawerHeader
decoration	头部装饰
margin	外边距 默认8.0
currentAccountPicture	主图像
otherAccountsPictures	附图像
accountName	标题
accountEmail	副标题
onDetailsPressed	点击监听

3、Drawer可以添加头部效果

• DrawerHeader：展示头部基本信息
• UserAccountsDrawerHeader：展示用户头像、用户名、email等信息

4、DrawerHeader常用属性

• child：Widget类型，Header里面所显示的内容控件
• padding、margin
• decoration：Decoration类型，header区域的decoration，通常用来设置背景颜色或者背景图片。

5、UserAccountsDrawerHeader常用属性

• currentAccountPicture：Widget类型，用来设置当前用户的头像
• accountName：Widget类型，当前用户的名字
• accountEmail：Widget类型，当前用户的 Email
• onDetailsPressed： VoidCallback类型，当 accountName 或者 accountEmail 被点击的时候所触发的回调函数，可以用来显示其他额外的信息
• otherAccountsPictures：List类型，用来设置当前用户的其他账号的头像
• decoration：Decoration类型，header区域的decoration，通常用来设置背景颜色或者背景图片。
• margin

代码示例

简单创建侧滑菜单

return Scaffold(
  appBar: AppBar(title: Text('Flutter Drawer'),),
  drawer: Drawer(
      child:Container(
        alignment: Alignment.center,
        child: Text('我是Drawer',style: TextStyle(fontSize: 30),),
      ),
    ),
  body: Container(
    alignment: Alignment.center,
    child: Text('data')
  ),
);

进阶

drawer: Drawer(
  child: ListView(
    children: <Widget>[
      UserAccountsDrawerHeader(
        accountEmail: Text('wo shi Email'), 
        accountName: Text('我是Drawer'),
        onDetailsPressed: () {},
        currentAccountPicture: CircleAvatar(
          backgroundImage: AssetImage('images/ab.jpg'),
        ),
      ),
      ListTile(
        title: Text('ListTile1'),
        subtitle: Text('ListSubtitle1',maxLines: 2,overflow: TextOverflow.ellipsis,),
        leading: CircleAvatar(child: Text("1")),
        onTap: (){Navigator.pop(context);},
      ),
      Divider(),//分割线
      ListTile(
        title: Text('ListTile2'),
        subtitle: Text('ListSubtitle2',maxLines: 2,overflow: TextOverflow.ellipsis,),
        leading: CircleAvatar(child: Text("2")),
        onTap: (){Navigator.pop(context);},
      ),
      Divider(),//分割线
      ListTile(
        title: Text('ListTile3'),
        subtitle: Text('ListSubtitle3',maxLines: 2,overflow: TextOverflow.ellipsis,),
        leading: CircleAvatar(child: Text("3")),
        onTap: (){Navigator.pop(context);},
      ),
      Divider(),//分割线
      new AboutListTile(
        icon: new CircleAvatar(child: new Text("4")),
        child: new Text("AboutListTile"),
        applicationName: "AppName",
        applicationVersion: "1.0.1",
        applicationIcon: new Image.asset(
          'images/bb.jpg',
          width: 55.0,
          height: 55.0,
        ),
        applicationLegalese: "applicationLegalese",
        aboutBoxChildren: <Widget>[
          new Text("第一条..."),
          new Text("第二条...")
        ],
      ),
      Divider(),//分割线
    ],
  ),
),