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
drawer: Drawer(
child: Column(
children: [
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: [
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’); }
