Flutter-持续存在BottomNavigationBar-如何在某些页面上不显示?

时间:2019-03-14 21:32:25

标签: flutter navigation persistence bottomnavigationview

我的实现:

main.dart:-它构建了多个支架(在UI树上方的所有屏幕上都创建了底部导航栏)

runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "WP-seven",
    builder: (context, child) {
      return Scaffold(
        bottomNavigationBar: NavyBottomBar(navigator: (child.key as GlobalKey<NavigatorState>)),
        body: child,
      );
    },
    home: NewsList(0),
));

NavyBottomBar.dart:navBar小部件的分隔类。 在这里,我们有一个全局导航器键,用于main.dart中以连接到每个孩子的导航器(孩子是每个屏幕小部件。)

final GlobalKey<NavigatorState> navigator;

所以打开页面也是一种逻辑,但是上面的代码足以在每个屏幕上显示bottomNavigationBar并能够进行导航。

问题是我不需要每个屏幕上的底部导航,应该有一种方法可以关闭某些屏幕上的navigationBar。

可能有不同的方法来实现此结果。.

2 个答案:

答案 0 :(得分:0)

最简单的答案是,您应该只在每个页面上构建底部导航栏。导航栏本身可以放入其自己的Stateless或StatefulWidget中,因此您不必每次都完全指定它。如果您希望它看起来像在页面之间持续存在,则可以使用flutter的Hero功能。

如果您不愿意这样做,则可以使用NavigatorObserver来切换是否显示bottomNavigationBar。这也意味着将MaterialApp / Scaffold / etc放在StatelessWidget中。

答案 1 :(得分:0)

我已经找到了一种解决方案,并且效果很好,但是关于上述内容,请先说几句话:

英雄不是一个选项,因为它不支持所有类型的导航,例如pushReplacement,并且在使用它时我的NavigationBar中出现动画错误,这可能是因为hero在动画中也是如此。

解决方案:

  • 我创建了一个名为homePage(类似于导航中心)的新屏幕。
  • 我们有一个叫做PageStorageBucket的东西,它对于存储每页状态非常有用,该状态在从一个页面到另一个页面的导航之间保持不变。 enter link description here

homePage.dart:

Widget newsList;
Widget favorites;
Widget profile;
Widget answers;

List<Widget> pages;
Widget currentPage;

final PageStorageBucket bucket = PageStorageBucket();

@override
void initState() {
  newsList = NewsList(isFavorite: 0);
  favorites = NewsList(isFavorite: 1);
  profile = Profile(userID: widget.userID);
  answers = Answers();

  pages = [newsList, favorites, profile, answers];

  currentPage = newsList;
  super.initState();
}

因此,我们在PageStorage存储桶中添加了许多小部件(屏幕),然后在homePage的Scaffold中使用它。甚至还有一个地方。

@override
Widget build(BuildContext context) {
return Scaffold(
  body: PageStorage(
    child: currentPage,
    bucket: bucket,
  ),
  bottomNavigationBar: BottomNavyBar(
    currentIndex: currentTab,
    onItemSelected: (int index) async {
        setState(() {
          currentTab = index;
          currentPage = pages[index];
        });
    },
    items: [
      BottomNavyBarItem(
          icon: Icon(Icons.menu),
          title: Text('Новости'),
          activeColor: Colors.blue,
          inactiveColor: Colors.black
      ),
      BottomNavyBarItem(
          icon: Icon(Icons.favorite_border),
          title: Text('Избранное'),
          activeColor: Colors.red,
          inactiveColor: Colors.black
      ), 
     ],
    ),
   );
  }
 }

它运行完美。

  • homePage脚手架是持久性的,当重定向到另一个页面时不会重新呈现,因此我们可以将导航栏与动画及其他任何东西一起使用。
  • 我们可以选择将哪些页面纳入此范围。
  • 我们仍然可以在这些屏幕中使用Navigator.push
  • 可以像需要不同的appBar一样使用多支架,只需删除主页的appBar,它将在打开的屏幕中使用appBar。