美文网首页
Flutter实现路由传参和参数回传(使用命名路由)

Flutter实现路由传参和参数回传(使用命名路由)

作者: 郑永博 | 来源:发表于2019-08-15 16:01 被阅读0次

第一步配置路由

1 新建routes_mamager.dart文件

//第一步配置路由
final routes = {
  //无参数传递
  '/': (context) => MainContent(),

  //有参数传递,ProductList构造
  //final Map arguments;
  //ProductList({Key key, this.arguments}) : super(key: key) {}
  '/product': (context, {arguments}) => ProductList(arguments: arguments)
};

//固定写法
// ignore: strong_mode_top_level_function_literal_block
var onGenerateRoute = (RouteSettings settings) {
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};

2 在Flutter的入口出初始化路由:

@override
Widget build(BuildContext context) {
  // TODO: implement build
  return MaterialApp(
    initialRoute: '/', //初始化的时候加载的路由
    onGenerateRoute: onGenerateRoute,
  );
}

3 使用
传参有返回值,arguments是传到下一级的参数,then((value))接收上级返回传回的参数

  Navigator.pushNamed(context, '/product', arguments: {'pid': 456})
                .then((value) {//"this is data"
              setState(() {
                name = value;
              });
            });

返回上级界面有返回值

 Navigator.pop(context, "this is data");

无参数返回值

  Navigator.pushNamed(context, '/product');

替换路由

Navigator.pushReplacementNamed(context, '/');

返回根

Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(builder: (context)=> new Tabs()), (route)=> route==null );

相关文章

  • Flutter实现路由传参和参数回传(使用命名路由)

    第一步配置路由 1 新建routes_mamager.dart文件 2 在Flutter的入口出初始化路由: 3 ...

  • 八、Flutter路由

    目录一、基本路由二、基本路由传参三、命名路由四、命名路由传参五、替换路由六、返回到根路由 一、基本路由 跳转到De...

  • vue路由传参.md

    两种传参方法 1.命名路由传参(name, params方式) 2.路由路径传参(path, query方式...

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • vue-router

    路由安装 路由配置 路由跳转 路由传参-param使用params传参只能使用name进行引入http://loc...

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • Flutter 路由传参小结

    Flutter路由传参总体来说有两种方式,一种是通过构造函数传参,一种是通过路由参数传参。这两种方式都可以使用自定...

  • flutter 命名路由传参

    需要展示的页面 //路由配置 //跳转代码

  • vue路由 filters方法和filter过滤用法总结

    限制单行文字长度 路由传参写法 ---- 声明式 路由传参写法 ---- 编程式 路由传参写法 ---- 路由里要...

  • flutter pushname使用和多参数传递

    配置routes参数 main函数: 使用 单参数 多参数 参考了:Flutter命名路由及传参的深度实践与解读[...

网友评论

      本文标题:Flutter实现路由传参和参数回传(使用命名路由)

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