Question

如何创建一个覆盖我的底部导航栏的全屏对话框？

我的主屏幕看起来像这样，其中有一个底部导航栏，可导航到三个不同的屏幕。

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: PageView(
        children: [new HomeTab(), new PresentationsTab(), new TestTab()],
        controller: _pageController,
        onPageChanged: pageChanged,
      ),
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _page,
        onTap: tapBottomNav,
        items: [
          new BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text('Home'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.pregnant_woman),
            title: new Text('Presentation'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.pregnant_woman),
            title: new Text('Presentation'),
          )
        ],
      ),
    );
  }

在某个地方，我有一个屏幕，它可以将fullscreenDialog标志设置为true，然后导航到另一个屏幕。

  Navigator.push(
    context,
    new MaterialPageRoute(
      builder: (BuildContext context) => new AddAudio(),
      fullscreenDialog: true,
    ),
  );

在我的应用程序栏上，我可以看到该标记确实有效，因为后退箭头将变为x，但我的bottomnavigationbar（底部导航栏）仍可见，该如何解决？

Answer 1

这可能是预期的行为，您应该按下PageRoute（带有PageRouteBuilder）并使用自定义过渡来制作从下到上的幻灯片动画。

Answer 2

我在我的帖子中为您提供了答案：Flutter MaterialPageRoute as fullscreenDialog appears underneath BottomNavigationBar

但是，为您概括一下：我假设您是从本身是Scaffold的页面上展示您的模式的？在这种情况下，您嵌套了Scaffold个对象，这就是问题所在。为确保您的模式出现在BottomNavigationBar上方，您需要将该窗口小部件包括在子Scaffold中，而不是其根目录中。

这似乎简直是痛苦，而不是解决大量样板和代码重复的好方法；但事实并非如此。您只需要为BottomNavigationBar构建自定义合成小部件，然后将ChangeNotifier与状态类一起使用来管理状态。我已经在我上面引用的帖子中对此进行了解释，最好在那里阅读答案，以便您理解上下文。

全屏对话框屏幕不覆盖底部导航栏

2 个答案: