在 Flutter 中移除导航覆盖

Question

我正在使用 Overlay.of(context) 在单击按钮时显示一些内容。但是有两个问题：

• 导航到下一个屏幕时不会删除叠加层。
• 里面使用了下拉按钮。但是菜单项显示在它下面。

这里是'Expected Output'。

当前输出在此屏幕截图中。

那么，如何在导航时移除叠加层并正确显示下拉菜单？如果无法覆盖，是否有任何解决方法？

PS：我正在使用 NavigatorKey 在单击固定边栏中的名称时更改表格，如屏幕截图所示。

Answer 1

由于您没有分享任何代码，我只能想象您是如何设计 UI 的。如果您在 Dartpad 中共享代码，我们中的一些人可能会提供帮助。

根据文档 here，可以使用 remove 方法删除

1. OverlayEntry。你可以在处理左侧菜单的点击时执行此操作。

2. 对于第二个问题，我找不到任何可行的解决方案。我怀疑这是不可能的，因为 Overlay 是一个 Stack 小部件，根据文档 here，它位于所有页面的顶部。如果您查看 DropDownButton 代码，它在内部使用 Navigator 推送新页面路由，如图所示 here 仍然在覆盖堆栈下面，因此我怀疑你可以实现这一点。

也就是说，您可能不应该为此目的使用 Overlay。相反，你最好使用 flutter 中的 showMenu 函数，它提供了更多的便利，并且在大多数情况下都会像你预期的那样运行。定位菜单需要一些 hackery showMenu 但可以实现。

您还可以检查 flutter_portal 包，它有一些不错的功能。但它仍处于开发阶段。

PS：为了获得灵感，您可以在这个 中查看我的答案，尤其是 showMenu 方法。

Answer 2

我找到了解决问题的办法。

• 在使用 RouteAware + RouteObserver 导航时删除了 Overlay，如此 .
所示
• 对于呈现在覆盖下方的下拉项，有一个 fork of default dropdown button 将下拉项的覆盖推入 root navigator 而不是嵌套导航器，并将它们显示在顶部。