如何從 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 ，但這就是我的 Header 的顯示方式：

它太大了，我不能讓它變小。 我不知道為什么它會以這種方式呈現，我查看了DrawerHeader源代碼，但看不到任何覆蓋我的Padding或Margin 。

只是為了確定問題出在DrawerHeader ，這就是我將其替換為Container時發生的情況：

它可以正常工作！

我是否遺漏了什么，或者這是 Flutter 中的一個錯誤？

Answer 1

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元素的DrawerHeader

Answer 2

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 3

嘗試用下面的代碼替換你的抽屜

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