时间戳

首页 > 解决方案 > Flutter Web Navigator/Overlay 布局问题

flutter-layout - Flutter Web Navigator/Overlay 布局问题

问题描述

当我开始我的第一个 Flutter Web 业务应用程序时，我的目标是将 MaterialApp 导航器放在我希望加载所有页面的地方。因此，我使用 MaterialApp 构建器来实现这一点。这个构建器为我提供了上下文和导航器，我可以返回我想要的小部件树。

一切都很好，我创建并返回了一个看起来像下面的代码的小部件树：

Scaffold(
  appBar: MyAppBar(),
  body: Row(children: [
    MySideBar(),
    Expanded(
      child: navigatorFromTheMaterialAppBuider,
    ),
  ]),
)

通过这种方式，我有一个固定的侧边栏和应用程序栏，并且所有页面都被加载而没有在固定部分进行任何重建。

当我需要在侧边栏中放置一些依赖于 Overlay 类的小部件时，问题就开始了。因为侧边栏在 MaterialApp 导航器之外，所以无法找到覆盖。做这种布局的另一个副作用是任何放置在我的页面内的小部件，因此在导航器内显示其覆盖条目，侧边栏宽度和应用栏高度的确切偏移量。

为了避免更改布局结构并使应用程序栏和侧边栏成为我的 Web 应用程序每个页面的一部分，我想知道是否有一种方法可以在导航器上方（甚至 MaterialApp 小部件上方）放置一个可以覆盖的覆盖MaterialApp 导航器覆盖整个小部件树。

我创建了一个 dartpad 示例代码以使其更清晰。 https://dartpad.dev/140e1e8a9ca0620301b43d0313e20bdb

标签： flutter-layoutoverlayflutter-web

解决方案

推荐阅读