Flutter - 选择项目后弹出菜单未关闭

Posted 2023-02-23

【中文标题】Flutter - 选择项目后弹出菜单未关闭

【英文标题】：Flutter - popup menu isn't closed after selecting an item

【发布时间】：2018-12-24 00:48:35

【问题描述】：

我正在尝试使用 Flutter，但遇到了 PopupMenuButton 的问题。在菜单中选择一个项目后，我会显示一个没有菜单的新屏幕，并且在我导航回来后，弹出菜单仍然打开 - 如下面的屏幕截图所示：

从编辑个人资料屏幕（第二张屏幕截图）导航回帐户屏幕（第一张屏幕截图）后，弹出菜单仍处于打开状态。我希望它被关闭。我在应用栏中创建弹出菜单的相关代码：

      actions: <Widget>[
    new PopupMenuButton(
      itemBuilder: (BuildContext context) 
        return <PopupMenuEntry>[
          new AppBarMenuItem("Edit profile", () => Navigator.pushNamed(context, Routes.editProfile)).build(context),
          new AppBarMenuItem("Option 1", () => ).build(context),
          new AppBarMenuItem("Option 2", () => ).build(context),
          new AppBarMenuItem("Option 3", () => ).build(context),
          new AppBarMenuItem("Option 4", () => ).build(context),
        ];
      ,
    ),
  ],

还有AppBarMenuItem：

new PopupMenuItem(
  child: new InkWell(
    child: new Text(_label),
    onTap: _onTap,
)

如何确保选择项目后弹出菜单关闭？看起来如果我只是在我的PopupMenuButton 中使用PopupMenuItem 并在onSelected 功能中导航到新屏幕，菜单就会正确关闭。但是当我使用InkWell 的onTap 函数时，它不再关闭了。

【参考方案1】：

只需在 onTap 函数中使用 pop Navigator.pop(context, "$popupValue");

PopupMenuItem<String>(
    value: "Replay Game",
    child: ListTile(
        leading: Icon(Icons.replay,
            color: theme.actionButtonColor),
        title: Text("Replay Game"),
        onTap: () 
            Navigator.pop(context, "Replay Game");
            showDialog(
                context: context,
                builder: (context) 
                    return AlertDialog(
                        content: Text("Clear input and replay game?"),
                        actions: <Widget>[
                            FlatButton(
                                onPressed: () => Navigator.pop(context),
                                child: Text("No"),
                                textColor: theme.alterDialogActionColor,
                            ),
                            FlatButton(
                                onPressed: () 
                                    store.dispatch(ReplayAction(timerBloc, varBloc.fireAnalytics));
                                    Navigator.pop(context);
                                ,
                                child: Text("Yes"),
                                textColor: theme.alterDialogActionColor,
                            ),
                        ],
                    );
                );
        ,
    ),
)

【讨论】：

这对我有用。谢谢你。你是如何确定这是你需要做的？

【参考方案2】：

如文档中所述，当用户从弹出菜单项中选择一个选项时，弹出菜单应自动关闭。 使用InkWell onTap 不会自动关闭弹出菜单，而是直接使用弹出菜单项在从popupMenuList 中选择项目时自动关闭弹出菜单 确保PopupMenuItem 的value 属性不为空，否则在选择PopupMenuItem 时不会调用onSelected 函数

【讨论】：

我已经尝试过了，但它不起作用。导航回来后弹出菜单仍然打开。

const PopupMenuItem<String>( value: 'Hooray!', child: const Text('Hooray!') ), 使用这个弹出菜单项只是为了测试并将其添加到您的弹出菜单中。从弹出菜单中选择它并查看菜单是否关闭，这意味着如果您在选择弹出菜单项后立即调用 navigator.pushNamed，则弹出菜单不会关闭的问题。不要在这里使用你自定义的弹出菜单项，只是一个普通的。

我有InkWell 作为PopupMenuItem 的孩子，我使用它的onTap 导航到另一个屏幕。看起来这确实存在问题，因为当我使用普通的 PopupMenuItem 并在 onSelected 函数中导航时它可以工作。这对我来说似乎是一个错误，我希望它在第一种情况下也会被关闭。

你在你的问题中说你从AppBarMenuItem返回一个修改过的PopupMenuItem所以我没有要求它的代码但我认为你应该更新这个问题所以如果有人来这里它可能也帮助他。您使用的是 InkWell 而不是简单的弹出菜单项，这在您的情况下不起作用。

您能删除Navigator.pop(context) 部分吗？它与问题无关。实际问题是使用InkWell 的onTap 函数，应该在答案中提及。我尝试编辑您的答案，但一些 SO 成员出于某种原因拒绝了它，显然没有理解这里的问题和答案。

【参考方案3】：

我遇到了同样的问题，这是我的解决方案。您的 PopUpMenuButton() 没有使用 onSelected 属性。 onSelected 属性将正确关闭您的 PopUpMenuButton。目前不是因为您的AppBarMenuItem 的onTap 属性正在接管该工作。 另外，我创建了PopUpMenuItem 的列表，而不是PopUpMenuEntry，不确定这是否会有所不同。但是对于我的每个PopUpMenuItem，我还为每个@ 分配了 value 属性，以便onSelected 将与PopUpMenuButton() 通信哪个项目被点击了。

类似这样的：

PopupMenuButton(
                onSelected: (selection) 
                  switch (selection) 
                    case 1:
                      ... do stuff...
                      break;
                    case 2:
                      ... break stuff...
                      );
                      break;
                  
                ,

其中case 1、case 2等指的是我分配给PopUpMenuItem()的value属性。

【讨论】：

请查看此编辑并了解我们的代码格式。

我想知道如何按预期正确使用 PopupMenuButton。我以前添加 ListTile 作为孩子，并调用导航 onTap。这个 onSelected 方法似乎更有意义。