我的实施:
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。
可能有不同的方法来实现这个结果..?
最简单的答案是,您应该只在每个页面上构建底部导航栏。导航栏本身可以放入自己的Stateless或StatefulWidget中,这样您就不必每次都完全指定它。如果你希望它看起来像是在页面之间保持不变,你可以使用flutter的Hero功能来实现。
如果这不是您愿意做的事情,您可以使用NavigatorObserver来切换是否显示bottomNavigationBar。这也意味着将MaterialApp / Scaffold /等放在StatelessWidget中。
我找到了一个解决方案并且效果很好,但首先要谈谈上述内容:
Hero不是一个选项,因为它不支持所有类型的导航,例如pushReplacement,我在使用它时导航栏中有动画错误,可能是因为英雄也有内置动画。
解:
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存储桶中添加了许多Widgets(屏幕),然后我们在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
),
],
),
);
}
}
它完美地运作。