如何推送停留在 Flutter BottomNavigationBar 之上的全屏页面答案

【问题标题】：How to push a full-screen page that stays on top of Flutter BottomNavigationBar如何推送停留在 Flutter BottomNavigationBar 之上的全屏页面
【发布时间】：2019-07-01 23:14:27
【问题描述】：

我到处搜索，找不到答案。

我有一个BottomNavigationBar 和一个FloatingActionButton。

我要做的是在用户按下FloatingActionButton 时推送一个全屏页面。

此页面需要覆盖BottomNavigationBar 和以前的AppBar 的区域，因为在这个新页面中，不允许用户转到BottomNavigationBar 的其他选项卡。

我遇到了fullscreenDialog，它是PageRoute Widget 类的一个属性，我很兴奋，但无法让它完全按照我想要的方式工作（顶部底部，我稍后会解释）

此页面将拥有自己的Scaffold 和AppBar，并且能够推送/弹出到下一个屏幕（在它自己的导航树内）

为了弹出此页面，用户将按下位于页面底部中心的“x”按钮。

我想从顶部推送/弹出这个新页面底部而不是通常的左侧导航样式右侧（对于 iOS/Cupertino）

我对 iOS 设备的这种 UI 很熟悉(ModalViewController)

那么我们如何实现 push 和 pop 命令呢？

或者还有其他更好/推荐的方法吗？

【问题讨论】：

标签： dart flutter

【解决方案1】：

我也遇到过类似的问题，用这个解决了：

await Navigator.of(context, rootNavigator:true).push( // ensures fullscreen
      CupertinoPageRoute(
            builder: (BuildContext context) {
              return MyWidget();
            }
      ) );

发现于https://stackoverflow.com/a/54017488/247451

【讨论】：

这个也值得一票，如果您正在处理多个导航器，那么您将需要一种访问 rootNavigator 的方法。我不知道rootNavigator。谢谢！
它按我的预期工作！！！非常感谢，即使使用 CupertinoTabScaffold，rootNavigator 也非常适合显示全屏页面！再次感谢！
这是最简单正确的方法。
请注意，使用根导航器会中断屏幕跟踪以进行分析，因为它无法在 RouteObserver.didPop 上提供正确的先前路线
这应该是正确的答案。奇迹般有效。即使使用 customPageRoutes

【解决方案2】：

你应该试试 MaterialPageRoute 和 fullscreenDialog 道具 (docs):

Navigator.of(context).push(new MaterialPageRoute<Null>(
  builder: (BuildContext context) {
    return new AddEntryDialog();
  },
  fullscreenDialog: true
));

在您的情况下可能不是最好的方法，但它会出现在底部栏和任何其他导航小部件上方。

代码取自：https://marcinszalek.pl/flutter/flutter-fullscreendialog-tutorial-weighttracker-ii/

【讨论】：

这很有效，谢谢:) 你知道在 AppBar 左侧禁用自动生成的“x”关闭按钮的方法吗？
@aytunch 很高兴它成功了！您可以尝试在对话框小部件类中将appBar: AppBar(leading: null) 设置为Scaffold。