第五十三回：DrawerHeader Widget

我们在上一章回中介绍了Drawer Widget相关的内容,本章回中将介绍 DrawerHeader Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们这里介绍的DrawerHeader Widget就是Drawer组件的一部分，它位于Drawer最上方，经常用来显示标题和图标。上一章回中只是简单提了一下，本章回中将详细介绍它的使用方法。除此之外还有一个UserAccountsDrawerHeader，它封装了一些常用的用户信息，方便我们更好地展示用户信息，本章回中将会介绍它的用法。

使用方法

DrawerHeader

和其它的Widget一样，DrawerHeader Widget提供了相关的属性来控制自己，下面是常用的属性：

• child属性：主要用来存放drawer头部(顶部)的组件，可以是文字或者图片；
• decoration属性：主要用来控制drawer头部区域的风格，比如背景色，背景图片等；

该组件大约占用drawer整体的1/5空间，不过没有提供相关属性来控制它的大小，我将它放在SizedBox组件中仍然无法调整它的大小。不过把drawer放在SizedBox中后可以调整drawer的大小，它会自动调整大小以便和drawer的大小相匹配。目前还没有找到好方法去调整header区域的大小。

UserAccountsDrawerHeader

和其它的Widget一样，UserAccountsDrawerHeader Widget提供了相关的属性来控制自己，下面是常用的属性：

• accountName属性：用来显示用户的姓名；
• accountEmail属性：用来显示用户的邮箱；
• decoration属性：主要用来控制用户的头像风格，比如背景色，头像图片等；
• currentAccountPicture属性：用来显示当前用户的头像；
• otherAccountsPictures属性：用来显示其它用户的头像，可以添加多个用户头像；
• arrowColor属性：用来显示一个箭头，其作用不是很明显；
• onDetailsPressed属性：是一个回调方法，点击用户的姓名邮箱时回调此方法；

上面的这些属性中前两个属性是必选属性，其它的都是可选属性。

• otherAccountsPictures属性是数组类型，因此可以添加多个用户头像，不过我觉得添加多个用户头像后不太好看。
• arrowColor属性：用来显示一个箭头，其作用不是很明显；
• 我觉得可以在onDetailsPressed属性添加相应的功能，点击箭头时可以选择不同的用户
  头像，因为这个箭头只有在添加多个用户头像后才会显示，只添加当前用户头像时该箭头处于隐藏状态，我们在界面中看不到它。

示例代码

//用来控制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的内容就介绍到这里，欢迎大家在评论区交流与讨论!