Flutter路由&pop()&Push()全面解析

[TOC]

前言

Route （路由）
Router (路由管理器)
将一个URL路径和一个函数映射

/users -> getAllUsers()
/users/count -> getUsersCount()

或者将一个页面和方法映射

  getHome()=> homePage.index

在Flutter中是将一个字符串和一个方法（或者说page）映射

"homePage" -> new HomePage()

静态路由

静态路由就是通过字符串进行注册的路由

return new MaterialApp(
     title: 'Flutter Demo',
     theme: new ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: new MyHomePage(title: 'Flutter实例'),
     routes: <String, WidgetBuilder> {
       // 这里可以定义静态路由，不能传递参数
       '/router/second': (_) => new SecondPage(),
       '/router/home': (_) => new RouterHomePage(),
     },
   );

使用
push一个新页面,pushNamed方法是有一个Future的返回值的，所以静态路由也是可以接收下一个页面的返回值的。但是不能向下一个页面传递参数。

Navigator.of(context).pushNamed('/router/second');

// 带返回值

Navigator.of(context).pushNamed('/router/second').then((value) {
                    // dialog显示返回值
                    _showDialog(context, value);
                  })

pop回上一个页面

Navigator.of(context).pop('这个是要返回给上一个页面的数据');

动态路由的使用

当需要向下一个页面传递参数时，要用到所谓的动态路由，自己生成页面对象，所以可以传递自己想要的参数。

Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
                    return new SecondPage(title: '路由是个好东西，要进一步封装');
                  }));

也可以用PageRouterBuilder来自定义打开动画

Navigator.of(context).push(new PageRouteBuilder(pageBuilder:
            (BuildContext context, Animation<double> animation,
                Animation<double> secondaryAnimation) {
          return new RefreshIndicatorDemo();
        }, transitionsBuilder: (
          BuildContext context,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
          Widget child,
        ) {
          // 添加一个平移动画
          return BRouter.createTransition(animation, child);
        }));

平移的变换
/// 创建一个平移变换
/// 跳转过去查看源代码，可以看到有各种各样定义好的变换

  static SlideTransition createTransition(
      Animation<double> animation, Widget child) {
    return new SlideTransition(
      position: new Tween<Offset>(
        begin: const Offset(1.0, 0.0),
        end: const Offset(0.0, 0.0),
      ).animate(animation),
      child: child, // child is the value returned by pageBuilder
    );
  }

Page（控制器）的入栈和出栈和刷新。

 以下是Flutter出栈和入栈的方法，共计13种，当然也有直接是Navigator.push 之类的对照方法共计13种，他们没什么区别，
 因为Navigator.method()这些方法其实也是调用下面的方法实现的。

 ********************

 Navigator.of(context).pushReplacement(newRoute);
 Navigator.of(context).push(route);
 Navigator.of(context).pushReplacementNamed(routeName);
 Navigator.of(context).pushNamed(routeName);
 Navigator.of(context).pushNamedAndRemoveUntil(newRouteName, predicate)
 
 Navigator.of(context).pop();
 Navigator.of(context).popAndPushNamed(routeName);
 Navigator.of(context).popUntil(predicate);
 Navigator.of(context).maybePop();

 Navigator.of(context).removeRouteBelow(anchorRoute);
 Navigator.of(context).removeRoute(route);

 Navigator.of(context).replace(oldRoute: null, newRoute: null);
 Navigator.of(context).replaceRouteBelow(anchorRoute: null);

Navigator.of(context).push();

 官方的给的demo
 Navigator.push(context, 
MaterialPageRoute(builder: (BuildContext context) => MyPage()));
 1、适用非静态路由进行跳转。
 2、传递参数只能通过控制器的构造进行传递。

Navigator.of(context).pushNamed(context,routeName,args)

类似上面的push方法，不过只能打开静态Route,可以通过args传递参数。

D7F05CA1-3770-4CD9-A1CA-A666D92A4740.png

Navigator.of(context).pushNamedAndRemoveUntil(newRouteName, predicate)

87D3DCF4-60EC-4A38-9C3F-4C353BFA6807.png

 flutter 默认有两种路由（静态路由和动态路由）
 对应的RouterName也有两种方式进行申明，
  * 静态路由在注册的时候就进行了申明，默认MainPager 为（“/”）
  * 动态路由是当你打开这个Route的进行设置的（RouteSettings.name="pagerName"）
  
  
  上面图示采用以下方式就行打开页面
  Navigator.pushAndRemoveUntil(context,
                MaterialPageRoute(builder: (BuildContext context) {
              return CPager();
            }), ModalRoute.withName("pagerA"));
            
  1 :左1为操作流程，左二为结果：可以发现  A_Pager&B_Pager都被结束掉了，直到碰到MainPage 也就是默认routName为"/"的主界面。
  
  2 :右2为操作流程，右1为结果， B-Pager被结束掉了，知道碰到的routeName为pageA的界面。
  
  所以这个push方法的作用就是打开一个新界面，并且结束掉之后的界面，直到碰到指定RoutName的Pager为止，如果一个都没有匹配到，就会结束所有pager除了新打开的这个Pager.

Navigator.of(context).pushReplacement(newRoute,To result)

F55C7B67-C326-4417-AA65-DDCD619A0F73.png

!、pushReplacement 这个很好理解，就是Push的Pager替换当前Pager,可以是新的界面，也可以是刷新当前界面。

 注意这里的To result 其实这个意思就是返回给上一个route(当前正被替换的route的开启者)的一个结果，官网文档表明这是为了弹出框或者选择框被消失，并进入下一个界面，需要将结果返回上一个界面可以进行的操作。
 
 
 
 If non-null, `result` will be used as the result of the route that is
 popped; the future that had been returned from pushing the popped route
 will complete with `result`. Routes such as dialogs or popup menus
 typically use this mechanism to return the value selected by the user to
 the widget that created their route. The type of `result`, if provided,
 must match the type argument of the class of the popped route (`TO`).

Navigator.pop(context)

关闭一个路由，这里可以是Route也可以是Dialog, pop都是可以向上一层返回数据的。

Navigator.of(context).popAndPushNamed(routeName);

Navigator.of(context).popUntil(predicate);

 参考以上push

Navigator.of(context).mayPop(content);

 这个Android 开发者很好理解，这个就是唤醒了一个Android返回物理键，如果当前route 没有WillPopScope（）进行包裹（也即是拦截物理返回键&navigatorBar返回键），他就结束当前route。如果进行了包裹，就不结束当前界面。

Navigator.of(context).removeRouteBelow(anchorRoute);

Navigator.of(context).removeRoute(route);

 这个两个一般用不到，官方说法
 removeRoute:
 This method is used, for example, to instantly dismiss dropdown menus that
 are up when the screen's orientation changes.
 
 也就是说移除当前Route上的弹出框，我测试的时候，是用EvenBus方法在B-Pager中点击触发event，在A-Pager中移除了B-Pager，其实这个用到的地方就是你必须持有对应要移除的路由Instant.
 removeRouteBelow: 就是移除指定路由底层的临近的一个路由，当对应路由不存在的时候会报错。

Navigator.replace(context, oldRoute: null, newRoute: null)

Navigator.replaceRouteBelow();

 这个两个方法也必须持有oldRoute的Instant，目的就是替换对应的路由。
 官方说法是为了构建非线型用户体验，这个说法就是针对线型Android开发人员熟悉的APager->BPager->CPager 
然后返回就是 CPager->BPager->APager
通常之前Android面试：会问到你一个常见的问题，如果控制几个Activty流程用来达到业务流程的目的，用上Flutter 你会发现这些很简单就能实现了，而不必要进行维护一个ActivityStack，或者通过Actity生命周期进行拦截的复杂方式。