Flutter：抽屉 UI 问题

Question

我正在尝试创建一个左侧菜单用户界面，如下图所示，我为此使用了抽屉。

我的代码：

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
        appBar: MyAppBar(),
        backgroundColor: Colors.white,
        drawer: MenuDrawer(),
        body: HomeBody()
      ),
    );
  }

class MenuDrawer extends StatelessWidget {

  final List<MenuItems> MenuItemsList = [
    MenuItems(itemName: "option1", itemSource: Icons.home_outlined),
    MenuItems(itemName: "option2", itemSource: Icons.home_outlined),
    MenuItems(itemName: "option3", itemSource: Icons.home_outlined),
  ];

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => Profile(),
                ),
              );
            },
            child: DrawerHeader(
              decoration: BoxDecoration(
                color: Color(0xff2799fa),
              ),
              child: Column(
                  children:[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        IconButton(
                          icon: const Icon(
                            Icons.clear,
                            color: Colors.white,
                            size: 25,
                          ),
                          onPressed: () {
                            Navigator.of(context).pop(); // Closes the drawer
                          },
                        ),
                      ],
                    ),
                    const Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Center(
                          child: Icon(
                            Icons.account_circle,
                            color: Colors.white,
                            size: 60, // Set the color of the icon
                          ),
                        ),
                        SizedBox(width: 5.0),
                        Text(
                          'User Full Name',
                          style: TextStyle(
                              fontSize: 18.0,
                              color: Colors.white,
                              fontWeight: FontWeight.bold
                          ),
                        ),
                      ],
                    ),
                  ]
              ),
            ),
          ),
          // Add items
          SizedBox(
            height: 80,
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              itemCount: MenuItemsList.length,
              itemBuilder: (BuildContext context, int index) {
                return MenuListUI(MenuItemsList[index]);
              },
            ),
          ),
        ],
      ),
    );
  }
}

Widget MenuListUI(MenuItems menuItems) {
  return Container(
    margin: EdgeInsets.fromLTRB(20, 10, 0, 10),
    child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Icon(
            menuItems.itemSource,
            color: const Color(0xff2799fa),
            size: 25, // Set the color of the icon
          ),
          SizedBox(width: 10.0),
          Text(
            menuItems.itemName,
            style: const TextStyle(
              fontSize: 18.0,
              color: Colors.black,
            ),
          ),
        ],
      ),
    );
}

class MenuItems {
  final String itemName;
  final IconData itemSource;

  MenuItems({required this.itemName, required this.itemSource});
}

当前截图：

我在此 UI 上有 2 个问题：

1. 需要降低抽屉标题高度并将关闭图标放在右上角。
2. 选项列表视图未正确显示，未垂直填充，某些其他布局隐藏了它

更新

使用

CustomDrawerHeader

我降低了抽屉头的高度。

更新代码：

@override
  Widget build(BuildContext context) {
    return Drawer(
      backgroundColor: Colors.white,
      child: ListView(
        children: <Widget>[
          GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => Profile(),
                ),
              );
            },
            child: CustomDrawerHeader(),
          ),
          // Add items
          ListView.separated(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemCount: MenuItemsList.length,
            itemBuilder: (BuildContext context, int index) {
              return MenuListUI(MenuItemsList[index]);
            },
            separatorBuilder: (context, index) => const Divider(height: 1, color: Color(0xffdaebff),),
          ),
        ],
      ),
    );
  }
}

class CustomDrawerHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Define your desired height for the custom DrawerHeader.
    final double customHeaderHeight = 150.0;

    return Container(
      height: customHeaderHeight,
      child: DrawerHeader(
        decoration: BoxDecoration(
          color: Color(0xff2799fa),
        ),
        child: Column(
            children:[
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  IconButton(
                    icon: const Icon(
                      Icons.clear,
                      color: Colors.white,
                      size: 25,
                    ),
                    onPressed: () {
                      Navigator.of(context).pop(); // Closes the drawer
                    },
                  ),
                ],
              ),
              Flexible(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Center(
                      child: Icon(
                        Icons.account_circle,
                        color: Colors.white,
                        size: 60, // Set the color of the icon
                      ),
                    ),
                    SizedBox(width: 5.0),
                    Text(
                      'Emery Blair',
                      style: TextStyle(
                          fontSize: 18.0,
                          color: Colors.white,
                          fontWeight: FontWeight.bold
                      ),
                    ),
                  ],
                ),
              ),
            ]
        ),
      ),
    );
  }
}

当前截图：

但是存在对齐问题。名称部分不在正中心，关闭选项不在右上角。所以现在我有两个问题：

1. 上述对齐问题。
2. 列表视图填充到可用项目空间，而不是填充到整个页面。

Answer 1

而不是这个

SizedBox(
  height: 80,
  child: ListView.builder(
  scrollDirection: Axis.vertical,
  itemCount: MenuItemsList.length,
  itemBuilder: (BuildContext context, int index) {
  return MenuListUI(MenuItemsList[index]);
 },
),

试试这个

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    itemCount: MenuItemsList.length,
    itemBuilder: (BuildContext context, int index) {
    return MenuListUI(MenuItemsList[index]);
  },
 )