我们在上一章回中介绍了Drawer Widget相关的内容,本章回中将介绍DrawerHeader Widget.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们这里介绍的DrawerHeader Widget就是Drawer组件的一部分,它位于Drawer最上方,经常用来显示标题和图标。上一章回中只是简单提了一下,本章回中将详
细介绍它的使用方法。除此之外还有一个UserAccountsDrawerHeader,它封装了一些常用的用户信息,方便我们更好地展示用户信息,本章回中将会介绍它的用法。
2. 使用方法
2.1 DrawerHeader
和其它的Widget一样,DrawerHeader Widget提供了相关的属性来控制自己,下面是常用的属性:
- child属性:主要用来存放drawer头部(顶部)的组件,可以是文字或者图片;
- decoration属性:主要用来控制drawer头部区域的风格,比如背景色,背景图片等;
该组件大约占用drawer整体的1/5空间,不过没有提供相关属性来控制它的大小,我将它放在SizedBox组件中仍然无法调整它的大小。不过把drawer放在SizedBox
中后可以调整drawer的大小,它会自动调整大小以便和drawer的大小相匹配。目前还没有找到好方法去调整header区域的大小。
2.2 UserAccountsDrawerHeader
和其它的Widget一样,UserAccountsDrawerHeader Widget提供了相关的属性来控制自己,下面是常用的属性:
- accountName属性:用来显示用户的姓名;
- accountEmail属性:用来显示用户的邮箱;
- decoration属性:主要用来控制用户的头像风格,比如背景色,头像图片等;
- currentAccountPicture属性:用来显示当前用户的头像;
- otherAccountsPictures属性:用来显示其它用户的头像,可以添加多个用户头像;
- arrowColor属性:用来显示一个箭头,其作用不是很明显;
- onDetailsPressed属性:是一个回调方法,点击用户的姓名邮箱时回调此方法;
上面的这些属性中前两个属性是必选属性,其它的都是可选属性。otherAccountsPictures属性是数组类型,因此可以添加多个用户头像,不过我觉得添加多个用户
头像后不太好看。arrowColor属性:用来显示一个箭头,其作用不是很明显,我觉得可以在onDetailsPressed属性添加相应的功能,点击箭头时可以选择不同的用户
头像,因为这个箭头只有在添加多个用户头像后才会显示,只添加当前用户头像时该箭头处于隐藏状态,我们在界面中看不到它。
3. 示例代码
//用来控制drawer最上部分的区域
DrawerHeader(
child: Text("The Header"),
decoration: BoxDecoration(
//只控制header区域的颜色,不设置时默认为主题的primerColor
color: Colors.yellow,
//使用图片当作boxdecoration的背景
image: DecorationImage(
image: AssetImage("images/ex.png"),
//图像填充,这里的值是铺满整个屏幕
fit: BoxFit.cover,
//给背景图片添加颜色滤镜
colorFilter:
ColorFilter.mode(Colors.greenAccent, BlendMode.hardLight),
),
),
),
//创建用户信息的头部
UserAccountsDrawerHeader(
accountName: Text("User Name"),
accountEmail: Text("User Mail"),
currentAccountPicture:CircleAvatar(
backgroundImage:AssetImage("images/ex.png") ,
) ,
otherAccountsPictures:const [
CircleAvatar(
backgroundColor: Colors.yellow,
),
CircleAvatar(
backgroundColor: Colors.pinkAccent,
)
],
//只有设置了otherAccountsPictures时才夫显示
//和name,mail位于同一行,不过是在tail位置显示。
arrowColor: Colors.redAccent,
//name,mail和arraw中任何一个点击时回调此方法
onDetailsPressed: (){print("details pressed");},
decoration: BoxDecoration(
color: Colors.greenAccent,
//header背景色与drawer背景色的混合效果
backgroundBlendMode: BlendMode.hardLight,
),
),
上面的示例代码中我们创建了两个Drawer的header,第一个header只显示一个标题文字,同时修改了header区域的背景图片和颜色。第二个header是用户信息的
header,我们在header中添加了一个当前用户头像,两个其它用户头像。当前用户头像使用图片填充,其它用户头像使用颜色填充。把这两个drawer赋值给Scaffold
的drawer属性,编译并且运行该程序就可以看到drawer的顶部多了个一header区域。给Drawer添加用户头像后整个drawer看起来很漂亮,我在这里就演示程序运行
的结果了,建议大家自己动手去实践,大家可以修改header中的图片和颜色以及颜色的滤镜,进而调整出不同的效果。
看官们,关于DrawerHeader Widget的内容就介绍到这里,欢迎大家在评论区交流与讨论!