美文网首页flutter从零开始到高手Flutter
flutter页面间跳转和传参-Navigator的使用

flutter页面间跳转和传参-Navigator的使用

作者: 追梦3000 | 来源:发表于2018-06-05 16:42 被阅读5805次

    概述

    flutter中的默认导航分成两种,一种是命名的路由,一种是构建路由。

    命名路由

    这种路由需要一开始现在创建App的时候定义

    new MaterialApp(
          ....
          routes: {
            "nameRoute":(BuildContext context)=>new SecondPage(),
          },
        );
    

    然后就可以在程序中使用Navigator.pushNamed来跳转

     Navigator.pushNamed(context, "nameRoute");
    

    这种路由的缺点是不能传递参数。

    构建路由

    在push的时候使用自定义方法构建一个路由

    Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
       return new ThirdPage(title:"请输入昵称");
    }))
    

    这种方式就可以传递参数了。

    返回上一页并携带参数

    使用Navigator的pop返回可返回上一级,并携带一个参数

     Navigator.pop(context,"携带参数");
    

    接收路由返回的参数

    注意push系列的方法返回值是一个Future,可以用来接收参数

     Navigator.pushNamed<String>(context, "nameRoute").then( (String value){
       //处理代码
    });
    
    
     Navigator.push<String>(context, new MaterialPageRoute(builder: (BuildContext context){
    
        return new ThirdPage(title:"请输入昵称");
    
      })).then( (String result){
    
           //处理代码
    
      });
    
    
    

    注意这里dart中的泛型使用方法后面加上<泛型参数>,与java不一样。

    完整代码在这里:

    https://github.com/jzoom/flutter-example/tree/master/flutter_navigator

    相关文章

      网友评论

        本文标题:flutter页面间跳转和传参-Navigator的使用

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