Flutter中Navigation Drawer如何实现可横向滑动的菜单项？

完全可以实现，无需引入复杂第三方依赖，通过Flutter自带组件组合即可完成需求，具体实现方案如下：

Flutter的Navigation Drawer本质是一个可自定义的侧拉容器组件，你只需要在Drawer内部的垂直菜单项列表中，插入一块支持横向滚动的菜单区域即可，常规实现用ListView设置横向滚动属性就能完成。

步骤1：搭建基础Drawer结构 #

先给Scaffold配置常规的Drawer容器，代码示例如下：

Scaffold(
  appBar: AppBar(title: const Text("侧滑抽屉示例")),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        // 抽屉头部区域，可自定义用户信息等内容
        const DrawerHeader(
          decoration: BoxDecoration(color: Colors.blue),
          child: Text("用户信息", style: TextStyle(color: Colors.white, fontSize: 24)),
        ),
        // 普通垂直排列的菜单项
        const ListTile(leading: Icon(Icons.home), title: Text("首页")),
        const ListTile(leading: Icon(Icons.person), title: Text("个人中心")),
        // 插入横向滑动的菜单项区域
        _buildHorizontalMenuArea(),
        // 剩余其他垂直菜单项
        const ListTile(leading: Icon(Icons.settings), title: Text("设置")),
        const ListTile(leading: Icon(Icons.logout), title: Text("退出登录")),
      ],
    ),
  ),
)

步骤2：实现横向滑动菜单项组件 #

实现上述代码中调用的_buildHorizontalMenuArea方法，代码示例如下：

Widget _buildHorizontalMenuArea() {
  // 自定义横向菜单项数据
  final horizontalMenus = [
    {"icon": Icons.favorite, "name": "我的收藏", "color": Colors.red},
    {"icon": Icons.download, "name": "下载管理", "color": Colors.green},
    {"icon": Icons.share, "name": "一键分享", "color": Colors.blue},
    {"icon": Icons.history, "name": "浏览记录", "color": Colors.orange},
    {"icon": Icons.bookmark, "name": "我的书签", "color": Colors.purple},
    {"icon": Icons.feedback, "name": "意见反馈", "color": Colors.grey},
  ];

  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // 横向菜单区域的标题
      const Padding(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Text("快捷功能", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 14)),
      ),
      // 横向滚动菜单容器
      SizedBox(
        // 固定横向菜单的高度，避免和垂直列表滚动产生冲突
        height: 80,
        child: ListView.builder(
          // 设置为横向滚动
          scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.symmetric(horizontal: 16),
          itemCount: horizontalMenus.length,
          itemBuilder: (context, index) {
            final menu = horizontalMenus[index];
            return GestureDetector(
              onTap: () {
                // 处理横向菜单项的点击逻辑
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("你点击了${menu['name']}"))
                );
              },
              // 单个横向菜单项的样式，可根据你的UI需求自定义调整
              child: Container(
                width: 65,
                margin: const EdgeInsets.only(right: 16),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      padding: const EdgeInsets.all(10),
                      decoration: BoxDecoration(
                        color: (menu['color'] as Color).withOpacity(0.1),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Icon(
                        menu['icon'] as IconData,
                        color: menu['color'] as Color,
                        size: 22,
                      ),
                    ),
                    const SizedBox(height: 6),
                    Text(
                      menu['name'] as String,
                      style: const TextStyle(fontSize: 12),
                      textAlign: TextAlign.center,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    )
                  ],
                ),
              ),
            );
          },
        ),
      )
    ],
  );
}

• 必须给横向滚动的ListView外层套固定高度的SizedBox，否则垂直列表会检测到无限高度抛出异常
• 如果横向菜单项数量较少无需复用，可以直接替换为SingleChildScrollView套Row实现，写法更简洁
• 如果需要实现滑动吸附、选中态高亮等效果，可以自行扩展PageController或者使用相关辅助组件，基础滑动功能无需额外依赖

内容的提问来源于stack exchange，提问作者Faisal Bin Mohammad Ali