如何从 DrawerHeader 中删除 Padding

Question

这是我的

DrawerHeader

：

class MyDrawerHeader extends StatefulWidget {
  @override
  _MyDrawerHeaderState createState() => _MyDrawerHeaderState();
}

class _MyDrawerHeaderState extends State<MyDrawerHeader> {
  @override
  Widget build(BuildContext context) {
    return DrawerHeader(
      padding: EdgeInsets.all(0),
      margin: EdgeInsets.all(0),
      child: Center(child: Text('Header', style: Theme.of(context).textTheme.headline))
    );
  }
}

如你所见，我将

Padding

中的

Margin

和

DrawerHeader

制作为

0

，但这就是我的标题的显示方式：

它太大了，我无法将其缩小。我不知道为什么它会以这种方式呈现，我查看了

DrawerHeader

源代码，但我看不到其中有任何内容覆盖我的

Padding

或

Margin

。

只是为了确定问题出在

DrawerHeader

，这就是我用它替换

Container

时发生的情况：

它按其应有的方式工作！

我是否遗漏了什么，或者这是 Flutter 中的一个错误？

Answer 1

drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              DrawerHeader(
                padding: EdgeInsets.all(0.0),
                child: Container(
                  color: Theme.of(context).primaryColor,
                ),
              ),
              ListTile(
                title: Text("Home"),
              )
            ],
          ),
        ),

Answer 2

DrawerHeader

上始终有填充。如果你查看来源：

@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));
  assert(debugCheckHasMediaQuery(context));
  final ThemeData theme = Theme.of(context);
  final double statusBarHeight = MediaQuery.of(context).padding.top;
  return Container(
    height: statusBarHeight + _kDrawerHeaderHeight,
    margin: margin,
    decoration: BoxDecoration(
      border: Border(
        bottom: Divider.createBorderSide(context),
      ),
    ),
    child: AnimatedContainer(
      padding: padding.add(EdgeInsets.only(top: statusBarHeight)),
      decoration: decoration,
      duration: duration,
      curve: curve,
      child: child == null ? null : DefaultTextStyle(
        style: theme.textTheme.body2,
        child: MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: child,
        ),
      ),
    ),
  );
}

您可以自定义此代码：

height: statusBarHeight + _kDrawerHeaderHeight

- 这是标题的总高度

padding: padding.add(EdgeInsets.only(top: statusBarHeight))

- 这是

DrawerHeader

中子元素的填充

Answer 3

尝试用下面的代码更换您的抽屉

drawer: Drawer(
    child: DrawerHeader(
      child: ListView(
        children: <Widget>[
          Container(
            alignment: Alignment.topLeft,
            child: Text('Header', style: Theme.of(context).textTheme.headline),
          ),
        ],
      ),
    ),
  ), 

Answer 4

 child: DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
              bottom: Divider.createBorderSide(context,
                  color: Colors.white, width: 0.0),
            ),
          ))