Удалить оверлей на навигацию во флаттере

Question

Я использую Overlay.of(context) для отображения некоторого содержимого при нажатии кнопки. Но есть две проблемы:

• Наложение не удаляется при переходе к следующему экрану.
• Внутри него используются выпадающие кнопки. Но пункты меню показаны под ним.

Вот «Ожидаемый результат».

На этом снимке экрана показан токовый выход.

Итак, как может быть наложение удален во время навигации, и раскрывающийся список будет отображаться правильно? Если это невозможно с наложением, есть ли обходной путь?

PS: я использую NavigatorKey для изменения таблиц, когда щелкают имена на фиксированной боковой панели, как показано на скриншоте.

Answer 1

Я нашел решение своих проблем.

• Overlay удаляется при навигации с помощью RouteAware + RouteObserver, как показано в этом ответе stackoverflow .
• Для раскрывающихся элементов, представленных ниже в оверлее есть вилка стандартной выпадающей кнопки , которая вместо вложенного навигатора помещает оверлей выпадающих элементов в root navigator и отображает их сверху.

Answer 2

Поскольку вы не поделились ни одним кодом, я могу только представить, как вы разработали свой пользовательский интерфейс. Если вы поделитесь кодом в Dartpad, возможно, некоторые из нас могут помочь.

1. OverlayEntry можно удалить, используя метод remove согласно документации здесь . Вы можете сделать это, когда обрабатываете щелчок в левом меню.

2. Для второй проблемы я не смог найти никакого рабочего решения. Я сомневаюсь, что это невозможно, потому что Overlay - это виджет Stack, который находится сверху всех страниц согласно документам здесь . Если вы посмотрите на код DropDownButton, то он внутренне использует Navigator для получения sh нового маршрута страницы, как показано здесь , который все еще находится ниже стека наложения, и, следовательно, я подозреваю, что вы можете достичь этого.

Тем не менее, вы, вероятно, не должны использовать Overlay для этой цели. Вместо этого вам лучше использовать showMenu функцию от флаттера, которая обеспечивает больше удобства и будет вести себя так, как вы ожидали в большинстве случаев. Позиционирование меню требует некоторой взлома с showMenu, но достижимо.

Вы также можете проверить пакет flutter_portal , который имеет некоторые приятные функции. Но он все еще находится в стадии разработки.

PS: Для вдохновения вы можете проверить мой ответ в этом посте особенно подход showMenu .