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

概述

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,694评论 19 139
  • 原文:ReactNative页面跳转Navigator ReactNative页面跳转Navigator Navi...
    难却却阅读 2,959评论 0 1
  • 你是否对bullet journal感兴趣却迟迟不敢入门?你是否对大神的bujo叹为观止,却眼花缭乱怎么也无法发现...
    尾一生阅读 333评论 2 0
  • “我在不同的时间捕捉到不同的人生场景,竟比舞台上更像舞台。” 这也正如那句“人生如戏,戏如人生”。我们生活于这大千...
    语竹123阅读 336评论 0 1
  • 快要裂开了,我只是觉得整个脑袋像要炸裂了一样。 坐了起来,我发誓这是我费了好大劲才做到的。拿起一支烟放...
    随意吗_阅读 218评论 2 0

友情链接更多精彩内容