美文网首页
Flutter Route 路由传递参数

Flutter Route 路由传递参数

作者: 代瑶 | 来源:发表于2020-07-09 14:33 被阅读0次

有两种方式可以进行路由跳转

第一种方式

  1. 在main.dart里面配置routes

const String HOME_SEARCH = "/homeSearch";
const String BUSINESS_CARD = "/businessCard";

  //这里写一个Map集合, Key写成常量
Map<String, WidgetBuilder> routeMap = <String, WidgetBuilder>{
    BUSINESS_CARD : (BuildContext context) => BusinessCardPage(),
    HOME_SEARCH : (BuildContext context) => HomeSearchPage()
 };
 
runApp(MaterialApp(
    home: LaunchPage(),
    routes: routeMap,  //配置routes参数
));
  1. 通过pushNamed 传递参数跳转
    Navigator.pushNamed(context, BUSINESS_CARD, arguments: {'title':"张三",'url':'https://m.eqxiu.com/s/BSHD8W9k'});
  1. 跳转界面接收参数
  @override
  Widget build(BuildContext context) {
    Map passValue = ModalRoute.of(context).settings.arguments;
    final String url = passValue['url'];
    final String title= passValue['title'];
  
}

第二种方式 跳转并退出当前界面

 Navigator.of(context).pushAndRemoveUntil(
    MaterialPageRoute(builder: (context) {
          return IndexPage();
    }),
   (route) => route == null
);

相关文章

  • Flutter Route 路由传递参数

    有两种方式可以进行路由跳转 第一种方式 在main.dart里面配置routes 通过pushNamed 传递参数...

  • flutter路由管理方法Fluro使用(一)

    引言 对于flutter路由使用,前期我们需要能达到两个功能点: 使用route进行页面跳转,传递和接收参数; 使...

  • 路由规则中定义参数

    一、使用query方式传递参数通过URL后面查询字符串传递参数给路由,路由对象可以通过$route.query对象...

  • Flutter 路由动画跳转

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

  • vue常用的路由间传参

    使用$route 使用 props将组件与路由解耦 方式一:使用$route 此方法传递参数不在URL路径拼接显示...

  • 在vue-router中设置和获取参数的方法

    vue-router中传递参数 1.通过设置路由name属性,用{{ $route.name }}获取。 例如:设...

  • Flutter-路由

    一、概念 在flutter中路由也是用来处理页面跳转、页面数据传递等操作,主要是通过路由(Route)和导航器(N...

  • Flutter 路由传入中文参数报错无法push问题

    flutter自带路由传递参数和使用第三方库fluro路由传递参数都可以通过一下方式解决问题 其中mapValue...

  • Flutter细节记录

    一、路由 flutter进行页面跳转是由路由来实现的(Route),Navigator负责Route的压入和弹出。...

  • flutter04: 路由跳转

    路由分两种:静态路由和动态路由 Flutter里面有路由支持所有的路由场景,push、pop页面,页面间的参数传递...

网友评论

      本文标题:Flutter Route 路由传递参数

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