如何从 DrawerHeader 中删除填充

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))
    );
  }
}

如您所见，我将 DrawerHeader 中的 Padding 和 Margin 设为 0，但我的页眉是这样显示的：

它太大了，我不能把它变小。我不知道为什么以这种方式呈现它，我查看了 DrawerHeader 源代码，但我看不到其中有任何内容覆盖我的 Padding 或 Margin.

为了确定问题出在 DrawerHeader，当我将它替换为 Container 时会发生以下情况：

它正常工作！

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

Answer 1

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

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

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: ListView(
            padding: EdgeInsets.zero,
            children: [
              DrawerHeader(
                padding: EdgeInsets.all(0.0),
                child: Container(
                  color: Theme.of(context).primaryColor,
                ),
              ),
              ListTile(
                title: Text("Home"),
              )
            ],
          ),
        ),

如何从 DrawerHeader 中删除填充

How to remove Padding from DrawerHeader

flutter

flutter-layout