如何在Flutter中实现支持图片的多级选项菜单？

先看你需求的示例效果：

一、手动实现思路 #

如果不想依赖第三方包，可以通过Flutter原生组件组合实现：

1. 基础菜单结构
   用PopupMenuButton作为一级菜单的触发入口，自定义PopupMenuItem的布局——通过Row组件将文本和ImageView（可以是Icon、Image.asset或NetworkImage）组合，控制左右排列。

2. 多级菜单触发
   对于需要展开子菜单的选项，在PopupMenuItem的onTap回调中，通过OverlayEntry创建悬浮的子菜单容器，手动控制子菜单的显示位置（比如在父选项的右侧弹出）。这种方式能完全自定义菜单的样式和交互逻辑。

3. 示例代码片段：

// 一级菜单触发按钮
PopupMenuButton(
  itemBuilder: (context) => [
    PopupMenuItem(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text("选项1"),
          Image.asset("assets/icon1.png", width: 20),
        ],
      ),
      onTap: () {
        // 弹出子菜单逻辑，这里用OverlayEntry实现
        showSubMenu(context);
      },
    ),
    PopupMenuItem(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text("选项2"),
          Image.network("https://example.com/icon2.png", width: 20),
        ],
      ),
    ),
  ],
)

// 子菜单实现示例
void showSubMenu(BuildContext context) {
  final overlay = Overlay.of(context);
  final renderBox = context.findRenderObject() as RenderBox;
  final position = renderBox.localToGlobal(Offset.zero);

  final overlayEntry = OverlayEntry(
    builder: (context) => Positioned(
      left: position.dx + renderBox.size.width,
      top: position.dy,
      child: Material(
        elevation: 4,
        child: Container(
          width: 200,
          child: Column(
            children: [
              ListTile(
                leading: const Text("子选项1"),
                trailing: Image.asset("assets/sub_icon1.png", width: 20),
                onTap: () {
                  // 子选项点击逻辑
                  overlayEntry.remove();
                },
              ),
              // 更多子选项...
            ],
          ),
        ),
      ),
    ),
  );

  overlay.insert(overlayEntry);
}

二、推荐第三方包 #

如果想快速实现，这些成熟的包能满足需求：

• multi_level_dropdown：专门为多级下拉菜单设计，支持自定义每个菜单项的widget，轻松在选项或菜单尾部添加ImageView，配置简单。
• dropdown_search：支持多级菜单和搜索功能，允许自定义item的布局，通过itemBuilder可以自由添加图片、图标等元素。
• flutter_multi_select_items：支持多级选择场景，提供灵活的item自定义能力，能直接在选项中嵌入ImageView组件。

使用第三方包时，只需按照文档配置itemBuilder或自定义widget，就能实现你需要的带ImageView的多级菜单效果。

内容的提问来源于stack exchange，提问作者amit.flutter