微信交流群

# DrawerHeader

通常用于Drawer组件的顶部区域,DrawerHeader本质上是一个Container,用法如下:

DrawerHeader(
  decoration: BoxDecoration(
    color: Colors.blue.withOpacity(.5)
  ),
  child: Row(
    children: <Widget>[
      CircleAvatar(
        child: Text('孟'),
      ),
      SizedBox(width: 10,),
      Text('老孟')
    ],
  ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果如下:

当外形发生变化时,会有动画过度:

DrawerHeader(
  decoration: BoxDecoration(
    color: _color
  ),
  duration: Duration(seconds: 1),
  child: Row(
    children: <Widget>[
      CircleAvatar(
        child: Text('孟'),
      ),
      SizedBox(width: 10,),
      ActionChip(
        label: Text('老孟'),
        onPressed: (){
          setState(() {
            _color = Colors.red.withOpacity(.5);
          });
        },
      )
    ],
  ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果如下: