首先,我们在getStatus
函数里面已经更新了对应关系
/// 获取MaterialPage page 对应的 MyRouteStatus
MyRouteStatus getStatus(MaterialPage page) {
if (page.child is LoginPage){
return MyRouteStatus.login;
}else if (page.child is RegistrationPage) {
return MyRouteStatus.registration;
}else if (page.child is BottomNavigator) { /// BottomNavigator 取代homepage成为首页
return MyRouteStatus.home;
}else if (page.child is VideoDetailPage) {
return MyRouteStatus.detail;
}else {
return MyRouteStatus.unknown;
}
}
而在 BottomNavigator
中,四个 Tab 级别的页面组件是以静态成员的方式存放在 BottomNavigator
这个 Page 级别的页面组件的属性里的。
_tabPages = [ HomePage(), RankingPage(), FavoritePage(), ProfilePage(),];
这个属性的抽离,一方面是为了便于给 BottomNavigator
里的 PageView 顺利赋值。
body: PageView(
controller: _pageController,
children: _tabPages!,
/// 由滑动/点击底部导航栏都会引起的 Tab 切换
onPageChanged: (index) => _onTabChange(index, bottomChange: false),
),
另一方面,也是这个属性被抽离的根本原因:给页面切换的监听函数的 tabPage
参数,传入 Tab 级别的页面组件。
_onTabChange(int index, {bool bottomChange = false}){
if(bottomChange) {
/// 只有底部导航栏的点击切换时,才需要让PageView作出反应
/// 让PageView 展示对应的 tab
_pageController.jumpToPage(index);
} else {
/// 因为由滑动/点击底部导航栏都会引起的 Tab 切换
/// 都会触发PageView 的onPageChanged,所以这里我们 只在
/// onPageChanged 时(即两种触发方式导致的页面切换) 时 检测页面变化并输出,就可以了
HiNavigator.getInstance()
.onBottomTabChange(index, _tabPages![index]);
}
setState((){
/// 更新当前展示的 tab 的 index
_currentIndex = index;
});
}
这样在 HiNavigator
中 _bottomTab
的封装就会被传入具体的 Tab 级别的页面组件。(更加具体来说是 _bottomTab
的 curPage
被传入了 _tabPages![index]
)
void onBottomTabChange(int index, Widget curPage){
_bottomTab = MyRouteStatusInfo(MyRouteStatus.home, curPage);
_notify(_bottomTab!);
}
现在,我们回到 _notify
函数中新增的这段代码,就会豁然开朗了。也会明白为什么老师会说,这样会”明确到首页的哪一个tab“,因为我们通过封装 _tabPages
,在构造 _bottomTab
的时候就会自然传入是首页的哪一个tab。然后在 _notify
函数中的下面这段判断中,得到是否在首页,并且把 current
赋值为 拥有具体 tab 页面的 RouteStatusInfo 对象。
/// 下面条件成立说明打开了底部tab,因为修改了关系后,MyRouteStatus.home 对应 BottomNavigator
if (current.page is BottomNavigator && _bottomTab!=null){
/// 如果打开的是首页,则明确到首页的哪一个tab
/// (_bottomTab 在封装过程中,curPage传入了tab对应的页面组件)
current = _bottomTab!;
}
一次性掌握Flutter高阶技能+商业级复杂项目架构设计与开发方案
了解课程