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: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.yellow,
image:DecorationImage(
image: NetworkImage("https://www.itying.com/images/flutter/2.png"), fit:BoxFit.cover
)
),child: ListView(
children: <Widget>[
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

drawer: Drawer(
child: Column(
children: <Widget>[
UserAccountsDrawerHeader(
accountName:Text("姓名") , accountEmail:Text("[email protected]") , currentAccountPicture: CircleAvatar(
backgroundImage:
NetworkImage("https://www.itying.com/images/flutter/3.png"), ),decoration: BoxDecoration(
color: Colors.yellow,
image:DecorationImage(
image:
NetworkImage("https://www.itying.com/images/flutter/2.png"), fit:BoxFit.cover
)
),otherAccountsPictures: <Widget>[
Image.network("https://www.itying.com/images/flutter/4.png"),

Image.network("https://www.itying.com/images/flutter/5.png"), Image.network("https://www.itying.com/images/flutter/6.png")
], ),ListTile(
title: Text("个人中心"),
leading: CircleAvatar(
child: Icon(Icons.people)
), ),Divider(), ListTile(
title: Text("系统设置"),
leading: CircleAvatar(
child: Icon(Icons.settings)
), )
], )
)

Flutter 侧边栏路由跳转

onTap: (){
关闭侧滑栏
Navigator.of(context).pop();
跳转
Navigator.pushNamed(context, ‘/search’); }