抽屉菜单显示空白

Question

我是 Flutter 新手。我有一个抽屉菜单，但用户信息侧和菜单项部分之间有一点差距。

抽屉菜单用户信息侧

import 'package:flutter/material.dart';

class UserInformation extends StatelessWidget {
  const UserInformation({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const UserAccountsDrawerHeader(
      accountName: Text(
        "KULLANICI ADI",
        style: TextStyle(
            fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
      ),
      accountEmail: Text(
        "email@aspar.com",
        style: TextStyle(
            fontSize: 14, fontWeight: FontWeight.bold, color: Colors.white60),
      ),
      currentAccountPicture: CircleAvatar(
        child: Text(
          "AS",
          style: TextStyle(
              fontWeight: FontWeight.bold, fontSize: 40, color: Colors.black),
        ),
      ),
    );
  }
}

抽屉菜单项

import 'package:flutter/material.dart';
import 'aboutUs.dart';
import 'mygloves.dart';
import 'contact.dart';

class MenuItems extends StatelessWidget {
  const MenuItems({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.zero,
      children: [
        const Divider(thickness: 3, color: Color(0xFF166FC0)),
        InkWell(
          onTap: () {
            debugPrint("Tapped");
            Navigator.of(context).push(
                MaterialPageRoute(builder: (glovesContext) => MyGloves()));
          },
          child: const ListTile(
            leading: Icon(Icons.add_circle_outline_sharp),
            title: Text(
              "Your Gloves",
              style: TextStyle(fontSize: 18),
            ),
            trailing: Icon(Icons.navigate_next_sharp),
          ),
        ),
        const Divider(thickness: 3, color: Color(0xFF0FA9EA)),
        InkWell(
            child: ListTile(
                onTap: () {},
                leading: const Icon(Icons.fiber_new_outlined),
                title: const Text("What's New in Aspar?",
                    style: TextStyle(fontSize: 18)),
                trailing: const Icon(Icons.navigate_next_sharp))),
        const Divider(thickness: 3, color: Color(0xFF166FC0)),
        InkWell(
            onTap: () {
              Navigator.of(context).push(
                  MaterialPageRoute(builder: (newsContext) => const Blog()));
            },
            child: const ListTile(
                leading: Icon(Icons.add_box_outlined),
                title: Text(
                  "About Us",
                  style: TextStyle(fontSize: 18),
                ),
                trailing: Icon(Icons.navigate_next_sharp))),
        const Divider(thickness: 3, color: Color(0xFF0FA9EA)),
        InkWell(
          onTap: () {},
          child: const ListTile(
              leading: Icon(Icons.help_outline),
              title: Text(
                "Help",
                style: TextStyle(fontSize: 18),
              ),
              trailing: Icon(Icons.navigate_next_sharp)),
        ),
        const Divider(thickness: 3, color: Color(0xFF166FC0)),
        InkWell(
          onTap: () {
            Navigator.of(context).push(MaterialPageRoute(
                builder: (contactContext) => const Contact()));
          },
          child: const ListTile(
              leading: Icon(Icons.contact_mail_outlined),
              title: Text(
                "Contact",
                style: TextStyle(fontSize: 18),
              ),
              trailing: Icon(Icons.navigate_next_sharp)),
        ),
        const Divider(thickness: 3, color: Color(0xFF0FA9EA)),
      ],
    );
  }
}

我应该怎么做才能消除项目和用户信息部分之间的差距？另外，我添加了填充零，如果我不这样做会有更大的差距。谢谢回复。

Answer 1

可能是几件事。但是，DrawerHeader() 小部件具有默认的底部边距，这可能是原因。

DrawerHeader(child: Text('Header'), margin: EdgeInsets.zero),

Answer 2

在您的 DrawerHeader 部分，将 margin 和 padding 都放入 EdgeInsets.zero:

DrawerHeader(child: ..., margin: EdgeInsets.zero,padding: EdgeInsets.zero),

此外，如果您想最小化分隔线 space，请将厚度和高度都设置为 3

Divider(thickness: 3, height: 3, color: Color(0xFF166FC0))

尝试各种方法并应用适合您的方法。

Answer 3

我已经解决了这个问题，由我的代码中不可见的分隔线的“默认高度”引起的问题。

我设置的高度和厚度一样，间隙消失了。

children: [
        const Divider(
          thickness: 3,
          color: Color(0xFF166FC0),
          height: 3,
        ),

抽屉菜单显示空白

Drawer Menu Shows Gaps

android

flutter

dart

flutter-layout