Flutter学习 侧边栏(抽屉)DrawerHeaderUserAccountsDrawerHeader侧边栏路由跳转 侧边栏(抽屉)
侧边栏可以分为左侧边栏和右侧边栏，是放在Scaffold中使用的
return Scaffold( appBar: AppBar( title: const Text('Flutter Demo'), ), drawer: Drawer( child: Text("左侧边栏"), ), endDrawer: Drawer( child: Text("右侧边栏"), ), ); DrawerHeaderUserAccountsDrawerHeader内对一些常用的组件进行了封装，可以帮助我们快速实现一个抽屉内的用户信息暂时，但格式固定（头像，用户名等已经固定在指定位置），如果想要实现更多样式的话可以使用上面的DrawerHeader进行自定义。
需要注意的几点:
在侧边栏点击进入相应页面然后返回时抽屉收入 Navigator.of(context).pop(); 路由就是在相应listtile中添加onTap()方法，然后使用方法和前面讲到的路由方法相同。 Navigator.of(context).push(MaterialPageRoute( builder: (BuildContext context) { return UserPage(); } ) ); drawer: Drawer( child: Column( children: [ Row( children: [ Expanded( child: UserAccountsDrawerHeader( accountEmail: Text("1658554314@qq.com"), accountName: Text("sky"), currentAccountPicture: CircleAvatar( backgroundImage: NetworkImage( "https://cdn.stocksnap.io/img-thumbs/960w/goose-flock_7EARMYLNXB.jpg")), decoration: BoxDecoration( image: DecorationImage( image: NetworkImage( "https://cdn.stocksnap.io/img-thumbs/960w/ice-nature_PHKM6CXBLQ.jpg"), fit: BoxFit.cover), ), otherAccountsPictures: [ Image.network( "https://cdn.stocksnap.io/img-thumbs/960w/flower-bloom_NZWKWLNPYX.jpg"), Image.network( "https://cdn.stocksnap.io/img-thumbs/960w/flower-bloom_KAKMFZ02RH.jpg"), ], )) ], ), ListTile( leading: CircleAvatar(child: Icon(Icons.home)), title: Text("我的空间"), ), //设置分割线 Divider(), ListTile( leading: CircleAvatar(child: Icon(Icons.people)), title: Text("用户中心"), //在这里设置转跳 onTap: () { Navigator.of(context).pop(); Navigator.of(context) .push(MaterialPageRoute(builder: (BuildContext context) { return UserPage(); })); }, ), Divider(), ListTile( leading: CircleAvatar(child: Icon(Icons.settings)), title: Text("设置中心"), ) ], ), ),
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
