Flutter Drawer 侧滑菜单、抽屉_flutter 抽屉侧滑菜单

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

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

参数讲解

代码示例

简单创建侧滑菜单

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(),//分割线
    ],
  ),
),

效果图

完整代码

查看完整代码