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

效果图

Flutter Drawer 侧滑菜单、抽屉_第1张图片

完整代码

查看完整代码

你可能感兴趣的:(Flutter,基础,Flutter,Drawer,侧滑菜单,抽屉,Flutter,Drawer,Flutter抽屉,Flutter,侧滑菜单)