flutter 之侧边栏
在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边
栏。侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧
边栏。
return Scaffold( appBar: AppBar( title: Text("Flutter App"), ),drawer: Drawer( child: Text('左侧边栏'), ),endDrawer: Drawer( child: Text('右侧侧边栏'), ), );
Flutter DrawerHeader
需要自己搭建布局
decoration 设置顶部背景颜色
child 配置子元素
padding 内边距
margin 外边距
drawer: Drawer( child: Column( children: [ DrawerHeader( decoration: BoxDecoration( color: Colors.yellow, image:DecorationImage( image: NetworkImage("https://www.itying.com/images/flutter/2.png"), fit:BoxFit.cover ) ),child: ListView( children: [ Text('我是一个头部') ], ), ),ListTile( title: Text("个人中心"), leading: CircleAvatar( child: Icon(Icons.people) ), ),Divider(), ListTile( title: Text("系统设置"), leading: CircleAvatar( child: Icon(Icons.settings) ), ) ], ) )
Flutter UserAccountsDrawerHeader
系统自带的侧边栏头部布局
decoration 设置顶部背景颜色
accountName 账户名称
accountEmail 账户邮箱
currentAccountPicture 用户头像
otherAccountsPictures 用来设置当前账户其他账户头像
margin
Flutter 侧边栏路由跳转
onTap: (){
关闭侧滑栏
Navigator.of(context).pop();
跳转
Navigator.pushNamed(context, ‘/search’); }