删除 Flutter 中的导航覆盖答案

【问题标题】：Remove Overlay on Navigation in Flutter删除 Flutter 中的导航覆盖
【发布时间】：2020-07-05 22:57:25
【问题描述】：

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

这是“预期输出”。

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

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

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

【问题讨论】：

【解决方案1】：

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

Overlay 在使用RouteAware + RouteObserver 导航时被删除，如stackoverflow answer 所示。
对于在叠加层下方呈现的下拉项，有一个 fork of default dropdown button 将下拉项的叠加层推送到 root navigator 而不是嵌套导航器中，并将它们显示在顶部。

【讨论】：

【解决方案2】：

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

OverlayEntry 可以根据文档here 使用remove 方法删除。您可以在处理左侧菜单的点击时执行此操作。
对于第二个问题，我找不到任何可行的解决方案。我怀疑这是不可能的，因为Overlay 是一个Stack 小部件，根据文档here，它位于所有页面的顶部。如果您查看DropDownButton 代码，它在内部使用Navigator 推送新的页面路由，如图所示 here 仍在 Overlay 堆栈下方，因此我怀疑您可以实现这一点。

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

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

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

【讨论】：

我尝试了showMenu 和flutter_portal。但似乎showMenu 用于生成菜单项，这不是我想要的。我想展示一些用于过滤表格的输入小部件。 flutter_portal 不支持 DropdownButton。有一些复杂的嵌套导航器问题。我认为我应该采用其他方式来显示这些过滤器，而不是处理叠加层。