Question

我需要实现一个嵌套在 PopUpMenu 中的 PopUpMenu 列表。单击其中一个项目时，我想获得另一个带有自己项目的 PopUpMenu。

我们可以说它可能看起来类似于经典的 Windows 选项。

在flutter中可以实现吗？

Answer 1

当然可以：

这显示了两个子菜单，每个子菜单有两个项目。我在演示中使用了一个枚举： enum Item { i1, i2, i3, i4 }

确保在 onSelected 中调用 Navigator.pop(context) 以关闭第一个菜单。

PopupMenuButton(
              
              child: Text('MENU'),
              itemBuilder: (BuildContext context) => <PopupMenuEntry<PopupMenuButton>>[
                PopupMenuItem(
                  child: PopupMenuButton(
                    child: Text('SUBMENU A'),
                    onSelected: (Item result) { 
                      setState(() { _selection = result; });
                    Navigator.pop(context); },
                    itemBuilder: (BuildContext context) => <PopupMenuEntry<Item>>[
                      const PopupMenuItem<Item>(
                        value: Item.i1,
                        child: Text('i1'),
                        ),
                      const PopupMenuItem<Item>(
                        value: Item.i2,
                        child: Text('i2'),
                        ),
                    ],
                  ),
                  ),
                
              PopupMenuItem(
                child: PopupMenuButton(
                    child: Text('SUBMENU B'),
                    onSelected: (Item result) { 
                      setState(() { _selection = result; });
                      Navigator.pop(context); },
                    itemBuilder: (BuildContext context) => <PopupMenuEntry<Item>>[
                      const PopupMenuItem<Item>(
                        value: Item.i3,
                        child: Text('i3'),
                        ),
                      const PopupMenuItem<Item>(
                        value: Item.i4,
                        child: Text('i4'),
                        ),
                    ],
                  ),
                ),
              ],
            ),

Answer 2

你可以像这样获得嵌套的弹出菜单：

PopupMenuButton(
  itemBuilder: (_) {
    return [
      PopupMenuItem(child: Text("Item1")),
      PopupMenuItem(
        child: PopupMenuButton(
          child: Text("Nested Items"),
          itemBuilder: (_) {
            return [
              PopupMenuItem(child: Text("Item2")),
              PopupMenuItem(child: Text("Item3"))
            ];
          },
        ),
      ),
    ];
  },
)

Flutter：弹出菜单内的弹出菜单

2 个答案: