全屏对话框屏幕不覆盖底部导航栏 [英] FullscreenDialog screen not covering bottomnavigationbar

问题描述

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

How do I create a fullscreenDialog that covers my bottomnavigationbar?

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

My mainscreen looks like this, where I have a bottomnavigationbar which navigates to three different screens.

@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，然后导航到另一个屏幕.

And somewhere I have a screen which navigates to another screen with the fullscreenDialog flag set to true like this.

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

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

On my appbar I can see that the flag actually works because my backbutton arrow will become an x, but my bottomnavigationbar will still be visible, how do I resolve this?

推荐答案

我在我的帖子中为您提供了答案:

I have an answer for you on my post: Flutter MaterialPageRoute as fullscreenDialog appears underneath BottomNavigationBar

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

But, to recap for you: I assume you are presenting your modal from a page which is itself a Scaffold? In which case you have nested Scaffold objects, and this is where the problem lies. To ensure your modal appears above the BottomNavigationBar you need to include that widget in the child Scaffold and not in the root one.

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

This seems like an utter pain in the arse, and not a great solution with loads of boilerplate and code duplication; but it isn't. You just need to build a custom composition widget for BottomNavigationBar and then use ChangeNotifier with a state class to manage state. I've explained it in the post I reference above, and it is probably better to read the answer there so you understand the context.

这篇关于全屏对话框屏幕不覆盖底部导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！