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: 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中删除填充

3 个答案: