颤音 - 持续的底部navigationbar-如何不在某些页面上显示



我的实现:

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。在这里,我们有一个全局导航器密钥,该密钥用于main。与每个孩子的导航器连接(儿童是每个屏幕小部件)。

final GlobalKey<NavigatorState> navigator;

因此,还有一个逻辑可以打开页面,但是上面的代码足以在每个屏幕上显示底部划分杆并能够导航。

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

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

我找到了一个解决方案,它效果很好,但首先关于上述字样:

英雄不是一个选项,因为它不支持所有类型的导航,例如PushperPlacement,我在使用NavigationBar时在Animation中有一个错误在动画中。

解决方案:

  • 我创建了一个名为HomePage的新屏幕(类似于导航的枢纽)。
  • 在那里,我们有一个称为pagestoragebucket的东西,这对于存储从一个页面到另一页的导航持续存在的每页状态很有用。在此处输入链接描述

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存储桶中添加了许多小部件(屏幕),然后在主页的支架中使用它。

@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
      ), 
     ],
    ),
   );
  }
 }

它可以很好地工作。

  • 主页脚手架是持久的,在重定向到另一页时不会重新渲染,因此我们可以使用带有动画和其他任何内容的NAV栏。
  • 我们可以选择将包含哪些页面。
  • 我们仍然可以使用navigator.push及其内部的其他屏幕
  • 可以像您需要不同的Appbars一样使用多s床,只需删除主页的Appbar,它将使用打开的屏幕中的Appbar。

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

如果这不是您愿意做的事情,则可以使用NavigatorObserver切换是否显示底部划分。这也意味着将材料应用程序/脚手架/等放入无状态的范围内。

相关内容

  • 没有找到相关文章

最新更新