美文网首页
Flutter 路由 函数解析

Flutter 路由 函数解析

作者: 代码的感情 | 来源:发表于2019-01-02 09:30 被阅读0次

都是 Navigator 的函数:

在使用 Navigator 函数时一定先要在 main 的MyAPP 中注册一个路由名称,如下:

routes: <String,WidgetBuilder>{
        "testFrist":(BuildContext context)=>new TestFrist(),
        "testSecond":(BuildContext context)=>new TestSecond(),
      },
解析函数1:pushNamed (这就是跳转)
@optionalTypeArgs

static Future<T> pushNamed<T extends Object>(BuildContext context, String routeName) {

  return Navigator.of(context).pushNamed<T>(routeName);

}

传入参数 context routeName 一个上下文,一个路由名称。

解析函数2:pushReplacementNamed

通过函数名称就知道 这是替换 路由跳转。

@optionalTypeArgs
  static Future<T> pushReplacementNamed<T extends Object, TO extends Object>(BuildContext context, String routeName, { TO result }) {
    return Navigator.of(context).pushReplacementNamed<T, TO>(routeName, result: result);
  }

使用:

Navigator.pushReplacementNamed(context, "testSecond");

替换当前APP和用户交互的界面。(也就是把栈顶的路由指向另外一个)

解析函数3:popAndPushNamed

原文的解析就是 把当前的路由弹出 加载一个新的路由:

@optionalTypeArgs
  static Future<T> popAndPushNamed<T extends Object, TO extends Object>(BuildContext context, String routeName, { TO result }) {
    return Navigator.of(context).popAndPushNamed<T, TO>(routeName, result: result);
  }

源码给出的使用:

Navigator.popAndPushNamed(context, '/nyc/1776');

如果用在一级界面 ,pop 之后跳转到二级界面 但是一级界面销毁了 如果返回 就会抛出异常:
Cannot reuse a MaterialPageRoute<dynamic> after disposing it. 其义:在释放MaterialPageRoute之后,无法重新使用它。所有使用 这个函数时 不能界面销毁了 而且路由也移除了,如果用在二级界面跳转3级界面 就毫无影响。

解析函数4:pushNamedAndRemoveUntil
@optionalTypeArgs
  static Future<T> pushNamedAndRemoveUntil<T extends Object>(BuildContext context, String newRouteName, RoutePredicate predicate) {
    return Navigator.of(context).pushNamedAndRemoveUntil<T>(newRouteName, predicate);
  }

源码给出的使用:

Navigator.pushNamedAndRemoveUntil(context, '/calendar', ModalRoute.withName('/'));

导航器调用此方法后,它前面的路由全部移除,且导航器无返回按钮,(只测试了安卓:如果点击设备上的返回键,立即返回 Home 界面)。可以使用在Splash(APP启动界面)界面跳转主界面。

后面 ModalRoute.withName('/') 参数 还未参透。。。。。。。。。

动态路由

解析函数5:push (算是一个动态加载的路由)
@optionalTypeArgs
  static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
    return Navigator.of(context).push(route);
  }

源码给出的使用:

Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => MyPage()));

MaterialPageRoute 中属性 builder 直接创建 一个 MyPage 指定路由

解析函数6:pushReplacement
@optionalTypeArgs
  static Future<T> pushReplacement<T extends Object, TO extends Object>(BuildContext context, Route<T> newRoute, { TO result }) {
    return Navigator.of(context).pushReplacement<T, TO>(newRoute, result: result);
  }

源码给出使用:

Navigator.pushReplacement(
         context, MaterialPageRoute(builder: (BuildContext context) => MyHomePage()));

动态 替换成当前路由

解析函数7:pushAndRemoveUntil
@optionalTypeArgs
  static Future<T> pushAndRemoveUntil<T extends Object>(BuildContext context, Route<T> newRoute, RoutePredicate predicate) {
    return Navigator.of(context).pushAndRemoveUntil<T>(newRoute, predicate);
  }

源码给出的使用:

Navigator.pushAndRemoveUntil(context,
                  MaterialPageRoute(builder: (BuildContext context)=>new MyHomePage()),
                  ModalRoute.withName('/'));

效果同 解析函数4:pushNamedAndRemoveUntil

后续。。。。。

相关文章

  • Flutter 路由 函数解析

    都是 Navigator 的函数: 在使用 Navigator 函数时一定先要在 main 的MyAPP 中注册一...

  • Flutter 路由源码解析

    前言 这是博客《Flutter路由 - Navigator 》的番外篇,如果你没有看过主篇真的不建议你直接看这篇文...

  • flask 源码解析:路由

    3.flask 源码解析:路由 构建路由规则 一个 web 应用不同的路径会有不同的处理函数,路由就是根据请求的 ...

  • 基础掌握点

    路由解析 RequestHandler 配置和响应URL请求的核心类 接入点函数RequestHandler.in...

  • Flutter 15 - Navigator (路由)组件详解1

    一、Flutter 中的路由 Flutter 中的路由通俗的讲就是页面跳转。在 Flutter 中通过 Navig...

  • Flutter(十三):路由

    1 Flutter 中的路由 Flutter 中的路由通俗的讲就是页面跳转。在 Flutter 中通过 Navig...

  • Flutter 路由原理解析

    前言 这一次,我尝试以不贴一行源代码的方式向你介绍 Flutter 路由的实现原理,同时为了提高你阅读源码的积极性...

  • Flutter 路由

    flutter 路由 页面跳转 在flutter中界面就是组件Flutter 中的路由通俗的讲就是页面跳转。在 F...

  • flutter 导航以及传参方式

    flutter 导航方式有基本路由和命名路由1、基本路由 ============================...

  • Flutter 路由动画跳转

    Flutter路由介绍 Flutter里面有路由支持所有的路由场景,push、pop页面,页面间的参数传递等等。f...

网友评论

      本文标题:Flutter 路由 函数解析

      本文链接:https://www.haomeiwen.com/subject/mzmalqtx.html