美文网首页
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 路由 函数解析

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