14. Flutter Drawer——侧边栏

1. Flutter Drawer 侧边栏

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

return Scaffold(
	appBar: AppBar(
		title: Text("Flutter App"), 
	),

	drawer: Drawer(
		child: Text('左侧边栏'), 
	),
	endDrawer: Drawer(
		child: Text('右侧侧边栏'), 
	), 
);
           

2. Flutter DrawerHeader

• 属性：

属性名称	描述
decoration	设置顶部背景颜色
child	配置子元素
padding	内边距
margin	外边距

• 代码：

drawer: Drawer(
	child: Column(
		children: <Widget>[
			DrawerHeader(
				decoration: BoxDecoration(
					color: Colors.yellow,
					image:DecorationImage(
						image: NetworkImage("url"), 
						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)
				),
			 )
			], 
		)
	)
           

3. Flutter UserAccountsDrawerHeader

• 属性：

属性名称	描述
decoration	设置顶部背景颜色
accountName	账户名称
accountEmail	账户邮箱
currentAccountPicture	用户头像
otherAccountsPictures	用来设置当前账户其他账户头像
margin

• 代码：

drawer: Drawer(
	child: Column(
		children: <Widget>[
		
		UserAccountsDrawerHeader(
				accountName:Text("are you ok") , 			
				accountEmail:Text("fine thank you") , 
				currentAccountPicture: CircleAvatar(
		backgroundImage:
			NetworkImage("url"), ),
			decoration: BoxDecoration(
			color: Colors.yellow,
			image:DecorationImage(
				image:
					NetworkImage("url"), 
					fit:BoxFit.cover
			)
		),
		otherAccountsPictures: <Widget>[
			Image.network("url"),
			Image.network("url")
			], 
		),
		ListTile(
			title: Text("个人中心"),
			leading: CircleAvatar(
			child: Icon(Icons.people)
			), 
		),
		Divider(), 
		ListTile(
			title: Text("系统设置"),
			leading: CircleAvatar(
				child: Icon(Icons.settings)
			), 
		   )
		], 
	)
)