请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

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

首先,我们在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回答

理解的透彻,总结的也很到位,赞。
0 回复 有任何疑惑可以回复我~
  • 提问者 Cloud_Iris #1
    非常感谢!
    回复 有任何疑惑可以回复我~ 2022-07-27 18:33:13
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信