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	点击监听

代码示例

简单创建侧滑菜单

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: [
      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: [
          new Text("第一条..."),
          new Text("第二条...")
        ],
      ),
      Divider(),//分割线
    ],
  ),
),

效果图

完整代码

查看完整代码