这里简单谈一下我对于现在路由切换以及Tab和Page两种级别的页面组件在我们的项目里扮演角色的理解

来源:5-12 扩展hi_navigator支持底部tab导航通知

Cloud_Iris

2022-07-26

首先,我们在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 级别的页面组件。(更加具体来说是 _bottomTabcurPage 被传入了 _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!;
}
写回答

1回答

CrazyCodeBoy

2022-07-26

理解的透彻,总结的也很到位,赞。
0
1
Cloud_Iris
非常感谢!
2022-07-27
共1条回复

Flutter高级进阶实战-仿哔哩哔哩-掌握Flutter高阶技能

一次性掌握Flutter高阶技能+商业级复杂项目架构设计与开发方案

1722 学习 · 870 问题

查看课程