Flutter Drawer 侧滑菜单、抽屉

Flutter 基础 专栏收录该内容
73 篇文章 6 订阅

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

效果图

完整代码

查看完整代码

  • 2
    点赞
  • 5
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值