Flutter开发：如何消除DrawerHeader与ListTile之间的空白

你实现NavDrawer组件时遇到的DrawerHeader和ListTile之间的空白，是DrawerHeader默认的底部外边距导致的，以下是具体解决方法：

问题原因 #

DrawerHeader组件默认设置了margin: EdgeInsets.only(bottom: 8.0)，这就是两者之间出现空白的直接原因。另外它的默认padding也会让内部内容和底部产生一定间距，需要一并调整。

解决方案 #

在DrawerHeader中添加margin: EdgeInsets.zero去除底部默认外边距，同时根据需求自定义padding来优化内部内容的布局：

修改后的完整代码 #

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

class NavDrawer extends StatelessWidget {
  Map<int, String> myMap = {
    0: '主頁',
    1: '工作資訊',
    2: '個人資料',
    3: '關於我們',
    4: '救生員需知',
    5: '拯溺考試資訊',
    6: '登入',
    7: '登出',
    8: '設置',
    9: '意見',
  };

  final int selectedTileIndex;
  final Function(int) onTileTap;
  NavDrawer({required this.selectedTileIndex, required this.onTileTap});

  // 检查用户登录状态
  final bool signedIn = FirebaseAuth.instance.currentUser != null;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          DrawerHeader(
            margin: EdgeInsets.zero, // 去除底部默认外边距
            padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16), // 自定义内边距，替代默认值
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2R1n85q9_Brx6MlNSKHWFc49qwCFkYGKFsQt0x6uL&s'),
              ),
            ),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CircleAvatar(
                    radius: 40,
                    backgroundImage: NetworkImage('https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&quality=85&auto=format&fit=max&s=a52bbe202f57ac0f5ff7f47166906403'),
                  ),
                  SizedBox(height: 10),
                  Text(
                    'name',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  ),
                  SizedBox(height: 5),
                  Text(
                    'phone',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 13,
                    ),
                  ),
                ],
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.home),
            title: Text(myMap[0]!),
            tileColor: selectedTileIndex == 0 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(0),
          ),
          ListTile(
            leading: Icon(Icons.work),
            title: Text(myMap[1]!),
            tileColor: selectedTileIndex == 1 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(1),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text(myMap[2]!),
            tileColor: selectedTileIndex == 2 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(2),
          ),
          ListTile(
            leading: Icon(Icons.info),
            title: Text(myMap[3]!),
            tileColor: selectedTileIndex == 3 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(3),
          ),
          ListTile(
            leading: Icon(Icons.warning),
            title: Text(myMap[4]!),
            tileColor: selectedTileIndex == 4 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(4),
          ),
          ListTile(
            leading: Icon(Icons.description),
            title: Text(myMap[5]!),
            tileColor: selectedTileIndex == 5 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(5),
          ),
          signedIn
              ? ListTile(
                  leading: Icon(Icons.logout),
                  title: Text(myMap[7]!),
                  onTap: () => onTileTap(7),
                )
              : ListTile(
                  leading: Icon(Icons.login),
                  title: Text(myMap[6]!),
                  onTap: () => onTileTap(6),
                ),
          Expanded(
            child: Container(),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text(myMap[8]!),
            tileColor: selectedTileIndex == 8 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(8),
          ),
          ListTile(
            leading: Icon(Icons.border_color),
            title: Text(myMap[9]!),
            tileColor: selectedTileIndex == 9 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(9),
          ),
        ],
      ),
    );
  }
}

额外方案：自定义头部容器 #

如果需要完全掌控头部的布局和间距，也可以用Container替代DrawerHeader，这样能更精准地控制所有样式，示例如下：

Container(
  height: 180, // 自定义头部高度
  decoration: BoxDecoration(
    color: Colors.blue,
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage('你的背景图链接'),
    ),
  ),
  child: Center(
    // 内部内容和原DrawerHeader一致
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        CircleAvatar(radius: 40, backgroundImage: NetworkImage('头像链接')),
        SizedBox(height: 10),
        Text('name', style: TextStyle(color: Colors.white, fontSize: 20)),
        SizedBox(height: 5),
        Text('phone', style: TextStyle(color: Colors.white, fontSize: 13)),
      ],
    ),
  ),
)

内容的提问来源于stack exchange，提问作者anonymous