flutter之侧边栏

在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏&＃xff0c;传入 endDrawer 可以定义右侧边
栏。侧边栏默认是隐藏的&＃xff0c;我们可以通过手指滑动显示侧边栏&＃xff0c;也可以通过点击按钮显示侧
边栏。

return Scaffold(
appBar: AppBar(
title: Text("Flutter App"), ),drawer: Drawer(
child: Text(&＃39;左侧边栏&＃39;), ),endDrawer: Drawer(
child: Text(&＃39;右侧侧边栏&＃39;), ), );


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(&＃39;我是一个头部&＃39;)
], ), ),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: [
UserAccountsDrawerHeader(
accountName:Text("姓名") , accountEmail:Text("dadi&＃64;itying.com") , 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: [
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’); }