走进Navigator 2.0

image.png

RoutePath

image.png

RouteInformationParser类

image.png

创建页面

image.png

RouteDelegate类

image.png
image.png
image.png

使用

image.png

调用流程

image.png

封装导航框架

hi_navigator.dart

  1. typedef RouteChangeListener(RouteStatusInfo current, RouteStatusInfo pre);
  3. ///创建页面
  4. pageWrap(Widget child) {
  5.   return MaterialPage(key: ValueKey(child.hashCode), child: child);
  6. }
  8. ///获取routeStatus在页面栈中的位置
  9. int getPageIndex(List<MaterialPage> pages, RouteStatus routeStatus) {
  10.   for (int i = 0; i < pages.length; i++) {
  11.     MaterialPage page = pages[i];
  12.     if (getStatus(page) == routeStatus) {
  13.       return i;
  14.     }
  15.   }
  16.   return -1;
  17. }
  19. ///自定义路由封装，路由状态
  20. enum RouteStatus { login, registration, home, detail, unknown }
  22. ///获取page对应的RouteStatus
  23. RouteStatus getStatus(MaterialPage page) {
  24.   if (page.child is LoginPage) {
  25.     return RouteStatus.login;
  26.   } else if (page.child is RegistrationPage) {
  27.     return RouteStatus.registration;
  28.   } else if (page.child is BottomNavigator) {
  29.     return RouteStatus.home;
  30.   } else if (page.child is VideoDetailPage) {
  31.     return RouteStatus.detail;
  32.   } else {
  33.     return RouteStatus.unknown;
  34.   }
  35. }
  37. ///路由信息
  38. class RouteStatusInfo {
  39.   final RouteStatus routeStatus;
  40.   final Widget page;
  42.   RouteStatusInfo(this.routeStatus, this.page);
  43. }
  45. ///监听路由页面跳转
  46. ///感知当前页面是否压后台
  47. class HiNavigator extends _RouteJumpListener {
  48.   static HiNavigator _instance;
  50.   RouteJumpListener _routeJump;
  51.   List<RouteChangeListener> _listeners = [];
  52.   RouteStatusInfo _current;
  54.   //首页底部tab
  55.   RouteStatusInfo _bottomTab;
  57.   HiNavigator._();
  59.   static HiNavigator getInstance() {
  60.     if (_instance == null) {
  61.       _instance = HiNavigator._();
  62.     }
  63.     return _instance;
  64.   }
  66.   ///首页底部tab切换监听
  67.   void onBottomTabChange(int index, Widget page) {
  68.     _bottomTab = RouteStatusInfo(RouteStatus.home, page);
  69.     _notify(_bottomTab);
  70.   }
  72.   ///注册路由跳转逻辑
  73.   void registerRouteJump(RouteJumpListener routeJumpListener) {
  74.     this._routeJump = routeJumpListener;
  75.   }
  77.   ///监听路由页面跳转
  78.   void addListener(RouteChangeListener listener) {
  79.     if (!_listeners.contains(listener)) {
  80.       _listeners.add(listener);
  81.     }
  82.   }
  84.   ///移除监听
  85.   void removeListener(RouteChangeListener listener) {
  86.     _listeners.remove(listener);
  87.   }
  89.   @override
  90.   void onJumpTo(RouteStatus routeStatus, {Map args}) {
  91.     _routeJump.onJumpTo(routeStatus, args: args);
  92.   }
  94.   ///通知路由页面变化
  95.   void notify(List<MaterialPage> currentPages, List<MaterialPage> prePages) {
  96.     if (currentPages == prePages) return;
  97.     var current =
  98.         RouteStatusInfo(getStatus(currentPages.last), currentPages.last.child);
  99.     _notify(current);
  100.   }
  102.   void _notify(RouteStatusInfo current) {
  103.     if (current.page is BottomNavigator && _bottomTab != null) {
  104.       //如果打开的是首页，则明确到首页具体的tab
  105.       current = _bottomTab;
  106.     }
  107.     print('hi_navigator:current:${current.page}');
  108.     print('hi_navigator:pre:${_current?.page}');
  109.     _listeners.forEach((listener) {
  110.       listener(current, _current);
  111.     });
  112.     _current = current;
  113.   }
  114. }
  116. ///抽象类供HiNavigator实现
  117. abstract class _RouteJumpListener {
  118.   void onJumpTo(RouteStatus routeStatus, {Map args});
  119. }
  121. typedef OnJumpTo = void Function(RouteStatus routeStatus, {Map args});
  123. ///定义路由跳转逻辑要实现的功能
  124. class RouteJumpListener {
  125.   final OnJumpTo onJumpTo;
  127.   RouteJumpListener({this.onJumpTo});
  128. }

main.dart

image.png

  2. class BiliRouteDelegate extends RouterDelegate<BiliRoutePath>
  3.     with ChangeNotifier, PopNavigatorRouterDelegateMixin<BiliRoutePath> {
  4.   final GlobalKey<NavigatorState> navigatorKey;
  6.   //为Navigator设置一个key，必要的时候可以通过navigatorKey.currentState来获取到NavigatorState对象
  7.   BiliRouteDelegate() : navigatorKey = GlobalKey<NavigatorState>() {
  8.     //实现路由跳转逻辑
  9.     HiNavigator.getInstance().registerRouteJump(
  10.         RouteJumpListener(onJumpTo: (RouteStatus routeStatus, {Map args}) {
  11.       _routeStatus = routeStatus;
  12.       if (routeStatus == RouteStatus.detail) {
  13.         this.videoModel = args['videoMo'];
  14.       }
  15.       notifyListeners();
  16.     }));
  17.     /*
  18.     //设置网络错误拦截器
  19.     HiNet.getInstance().setErrorInterceptor((error) {
  20.       if (error is NeedLogin) {
  21.         //清空失效的登录令牌
  22.         HiCache.getInstance().setString(LoginDao.BOARDING_PASS, null);
  23.         //拉起登录
  24.         HiNavigator.getInstance().onJumpTo(RouteStatus.login);
  25.       }
  26.     });
  27.     */
  28.   }
  30.   RouteStatus _routeStatus = RouteStatus.home;
  31.   List<MaterialPage> pages = [];
  32.   VideoModel videoModel;
  34.   @override
  35.   Widget build(BuildContext context) {
  36.     var index = getPageIndex(pages, routeStatus);
  37.     List<MaterialPage> tempPages = pages;
  38.     if (index != -1) {
  39.       //要打开的页面在栈中已存在，则将该页面和它上面的所有页面进行出栈
  40.       //tips 具体规则可以根据需要进行调整，这里要求栈中只允许有一个同样的页面的实例
  41.       tempPages = tempPages.sublist(0, index);
  42.     }
  43.     var page;
  44.     if (routeStatus == RouteStatus.home) {
  45.       //跳转首页时将栈中其它页面进行出栈，因为首页不可回退
  46.       pages.clear();
  47.       page = pageWrap(BottomNavigator());
  48.     } else if (routeStatus == RouteStatus.detail) {
  49.       page = pageWrap(VideoDetailPage(videoModel));
  50.     } else if (routeStatus == RouteStatus.registration) {
  51.       page = pageWrap(RegistrationPage());
  52.     } else if (routeStatus == RouteStatus.login) {
  53.       page = pageWrap(LoginPage());
  54.     }
  55.     //重新创建一个数组，否则pages因引用没有改变路由不会生效
  56.     tempPages = [...tempPages, page];
  57.     //通知路由发生变化
  58.     HiNavigator.getInstance().notify(tempPages, pages);
  59.     pages = tempPages;
  60.     return WillPopScope(
  61.       //fix Android物理返回键，无法返回上一页问题@https://github.com/flutter/flutter/issues/66349
  62.       onWillPop: () async => !await navigatorKey.currentState.maybePop(),
  63.       child: Navigator(
  64.         key: navigatorKey,
  65.         pages: pages,
  66.         onPopPage: (route, result) {
  67.           if (route.settings is MaterialPage) {
  68.             //登录页未登录返回拦截
  69.             if ((route.settings as MaterialPage).child is LoginPage) {
  70.               if (!hasLogin) {
  71.                 showWarnToast("请先登录");
  72.                 return false;
  73.               }
  74.             }
  75.           }
  76.           //执行返回操作
  77.           if (!route.didPop(result)) {
  78.             return false;
  79.           }
  80.           var tempPages = [...pages];
  81.           pages.removeLast();
  82.           //通知路由发生变化
  83.           HiNavigator.getInstance().noify(pages, tempPages);
  84.           return true;
  85.         },
  86.       ),
  87.     );
  88.   }
  90.   RouteStatus get routeStatus {
  91.     if (_routeStatus != RouteStatus.registration && !hasLogin) {
  92.       return _routeStatus = RouteStatus.login;
  93.     } else if (videoModel != null) {
  94.       return _routeStatus = RouteStatus.detail;
  95.     } else {
  96.       return _routeStatus;
  97.     }
  98.   }
  100.   bool get hasLogin => LoginDao.getBoardingPass() != null;
  102.   @override
  103.   Future<void> setNewRoutePath(BiliRoutePath path) async {}
  104. }
  106. ///定义路由数据，path
  107. class BiliRoutePath {
  108.   final String location;
  110.   BiliRoutePath.home() : location = "/";
  112.   BiliRoutePath.detail() : location = "/detail";
  113. }

home_page.dart

  2. class HomePage extends StatefulWidget {
  3.   const HomePage({Key key}) : super(key: key);
  5.   @override
  6.   _HomePageState createState() => _HomePageState();
  7. }
  9. class _HomePageState extends State<HomePage>
  10.     with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
  11.   var listener;
  12.   TabController _controller;
  13.   var tabs = ["推荐", "热门", "追播", "影视", "搞笑", "日常", "综合", "手机游戏", "短片·手书·配音"];
  15.   @override
  16.   void initState() {
  17.     super.initState();
  18.     _controller = TabController(length: tabs.length, vsync: this);
  19.     HiNavigator.getInstance().addListener(this.listener = (current, pre) {
  20.       print('home:current:${current.page}');
  21.       print('home:pre:${pre.page}');
  22.       if (widget == current.page || current.page is HomePage) {
  23.         print('打开了首页:onResume');
  24.       } else if (widget == pre?.page || pre?.page is HomePage) {
  25.         print('首页:onPause');
  26.       }
  27.     });
  28.   }
  30.   @override
  31.   void dispose() {
  32.     HiNavigator.getInstance().removeListener(this.listener);
  33.     super.dispose();
  34.   }
  36.   @override
  37.   Widget build(BuildContext context) {
  38.     super.build(context);
  39.     return Scaffold(
  40.       body: Column(
  41.         children: [
  42.           Container(
  43.             color: Colors.white,
  44.             padding: EdgeInsets.only(top: 30),
  45.             child: _tabBar(),
  46.           ),
  47.           Flexible(
  48.               child: TabBarView(
  49.                   controller: _controller,
  50.                   children: tabs.map((tab) {
  51.                     return HomeTabPage(name: tab);
  52.                   }).toList()))
  53.         ],
  54.       ),
  55.     );
  56.   }
  58.   @override
  59.   bool get wantKeepAlive => true;
  61.   ///自定义顶部tab
  62.   _tabBar() {
  63.     return TabBar(
  64.         controller: _controller,
  65.         isScrollable: true,
  66.         labelColor: Colors.black,
  67.         indicator: UnderlineIndicator(
  68.             strokeCap: StrokeCap.round,
  69.             borderSide: BorderSide(color: primary, width: 3),
  70.             insets: EdgeInsets.only(left: 15, right: 15)),
  71.         tabs: tabs.map<Tab>((tab) {
  72.           return Tab(
  73.               child: Padding(
  74.             padding: EdgeInsets.only(left: 5, right: 5),
  75.             child: Text(
  76.               tab,
  77.               style: TextStyle(fontSize: 16),
  78.             ),
  79.           ));
  80.         }).toList());
  81.   }
  82. }
  84. class HomeTabPage extends StatefulWidget {
  85.   final String name;
  87.   const HomeTabPage({Key key, this.name}) : super(key: key);
  89.   @override
  90.   _HomeTabPageState createState() => _HomeTabPageState();
  91. }
  93. class _HomeTabPageState extends State<HomeTabPage> {
  94.   @override
  95.   Widget build(BuildContext context) {
  96.     return Container(
  97.       child: Text(widget.name),
  98.     );
  99.   }
  100. }

底部导航：PageView + BottomNavigationBar

  2. ///底部导航
  3. class BottomNavigator extends StatefulWidget {
  4.   @override
  5.   _BottomNavigatorState createState() => _BottomNavigatorState();
  6. }
  8. class _BottomNavigatorState extends State<BottomNavigator> {
  9.   final _defaultColor = Colors.grey;
  10.   final _activeColor = primary;
  11.   int _currentIndex = 0;
  12.   static int initialPage = 0;
  13.   final PageController _controller = PageController(initialPage: initialPage);
  14.   List<Widget> _pages;
  15.   bool _hasBuild = false;
  17.   @override
  18.   Widget build(BuildContext context) {
  19.     _pages = [HomePage(), RankingPage(), FavoritePage(), ProfilePage()];
  20.     if (!_hasBuild) {
  21.       //页面第一次打开时通知打开的是那个tab
  22.       HiNavigator.getInstance()
  23.           .onBottomTabChange(initialPage, _pages[initialPage]);
  24.       _hasBuild = true;
  25.     }
  27.     return Scaffold(
  28.       body: PageView(
  29.         controller: _controller,
  30.         children: _pages,
  31.         onPageChanged: (index) => _onJumpTo(index, pageChange: true),
  32.         physics: NeverScrollableScrollPhysics(),
  33.       ),
  34.       bottomNavigationBar: BottomNavigationBar(
  35.         currentIndex: _currentIndex,
  36.         onTap: (index) => _onJumpTo(index),
  37.         type: BottomNavigationBarType.fixed,
  38.         selectedItemColor: _activeColor,
  39.         items: [
  40.           _bottomItem('首页', Icons.home, 0),
  41.           _bottomItem('排行', Icons.local_fire_department, 1),
  42.           _bottomItem('收藏', Icons.favorite, 2),
  43.           _bottomItem('我的', Icons.live_tv, 3),
  44.         ],
  45.       ),
  46.     );
  47.   }
  49.   _bottomItem(String title, IconData icon, int index) {
  50.     return BottomNavigationBarItem(
  51.         icon: Icon(icon, color: _defaultColor),
  52.         activeIcon: Icon(icon, color: _activeColor),
  53.         label: title);
  54.   }
  56.   void _onJumpTo(int index, {pageChange = false}) {
  57.     if (!pageChange) {
  58.       //让PageView展示对应tab
  59.       _controller.jumpToPage(index);
  60.     } else {
  61.       HiNavigator.getInstance().onBottomTabChange(index, _pages[index]);
  62.     }
  63.     setState(() {
  64.       //控制选中第一个tab
  65.       _currentIndex = index;
  66.     });
  67.   }
  68. }