全屏细节覆盖与投影仪位置答案

【问题标题】：Fullscreen details overlay with beamer location全屏细节覆盖与投影仪位置
【发布时间】：2021-12-22 02:19:27
【问题描述】：

免责声明：我是一个 Flutter 初学者，正在构建一个仅限 Web 的项目！

我有一个包含一组项目的屏幕。轻按其中一项后，应显示全屏叠加层，其中包含有关该项目的更多详细信息。

从功能上讲，与此屏幕截图非常相似，但显然主页面和叠加层中的内容不同。

我们称这两个屏幕为ItemsWidget 和ItemDetailsWidget。后者的背景不透明度为 0.5，这意味着它应该是半透明的。

因为我使用beamer 进行导航。我已经为ItemsWidget 声明了位置/items，为ItemDetailsWidget 声明了/items/:item_id

路由和设置工作正常，我可以在小部件之间导航。

但是，当 ItemDetailsWidget 显示时（即使是半透明背景），ItemsWidget 从下方消失。

在截图示例中，它看起来像这样：

我了解ItemDetailsWidget 它正在替换整个屏幕内容，但我希望将它放在ItemsWidget 之上。

我想这可以通过 Stack 小部件和两个子小部件来完成，但这必须在同一个投影仪位置。我希望有不同的投影仪位置进行 url 路由。

有什么想法或提示吗？这甚至可以用投影仪吗？谢谢

【问题讨论】：

【解决方案1】：

这个问题的答案是使用投影仪对话路由，如下例所示。

【讨论】：

【解决方案2】：

我对 Beamer 不熟悉，但你们为什么不将该功能实现为自定义对话窗口？

flutter 会消除屏幕上没有的任何内容，以防止内存泄漏和不必要地使用不可见的小部件。

如果您有兴趣将功能转换为对话框，请参阅关于对话框的精彩文章：https://material.io/components/dialogs/flutter

【讨论】：