Flutter中DrawerHeader移除顶部的Padding

为什么DrawerHeader顶部存在无法消除的Padding.

在使用DrawerHeader的过程中发现无论如何设置DrawerHeader的padding和margin，都不能避免顶部有一个和状态栏等高的padding

分析

这是由于DrawerHeader的自身特性导致的。
通过查看DrawerHeader的源码就会发现，虽然其构造函数中存在margin和padding参数，但是在最终build时候，还是会给child加上一个statusBarHeight的padding

1
2
3
4
// 节选自drawer_header.dart里_MyHomePageState的build函数中
final double statusBarHeight = MediaQuery.of(context).padding.top;
// 无法消除的padding
padding: padding.add(EdgeInsets.only(top: statusBarHeight)),

解决办法

使用DrawerHeader时将padding设置为负状态栏高度即可。

1
2
3
4
5
6
7
8
9
// 用同样的方式获取到状态栏高度
double _statusBarHeight = MediaQuery.of(context).padding.top;

DrawerHeader(
    decoration: BoxDecoration(color: Colors.white),
    // top padding 设置为负的状态栏高度
    padding:  EdgeInsets.only(top: -_statusBarHeight),
)
// ......

效果

设备:Essential Phone

环境:

1
2
3
4
Flutter 1.10.13-pre.10 • channel master • https://github.com/flutter/flutter.git
Framework • revision f4b4616f87 (2 days ago) • 2019-10-04 20:01:04 -0700
Engine • revision 7d90779bb6
Tools • Dart 2.6.0 (build 2.6.0-dev.0.0 d6c6d12ebf)