Flutter Navigator路由传参

所有内容首发微信公众号【WEB前端李志杰】，欢迎关注、点赞并转发！

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

一、命名路由传参

应用入口处定义路由表

class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false, // 隐藏预览中的debugtitle: 'Flutter Demo',routes: {'/': (context) => const HomePage(),"menu": (context) => const MenuPage()},);}
}

// 定义HomePage
class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("登录"),),body: ElevatedButton(onPressed: () async {// 实现路由跳转var result = await Navigator.pushNamed(context, 'menu',arguments: {'name': 'title'});print(result);},child: const Text('登录'),),);}
}

// 定义MenuPage
class MenuPage extends StatelessWidget {const MenuPage({Key? key}) : super(key: key);@override// 接收传参Widget build(BuildContext context) {dynamic argumentsData = ModalRoute.of(context)?.settings.arguments;return Scaffold(appBar: AppBar(title: Text('菜单' + argumentsData.toString()),),body: ElevatedButton(onPressed: () {Navigator.pop(context, {'name': "Navigator.pop传参"});},child: const Text("返回"),),);}
}

二、构建路由传参

从HomePage页面跳转MenuPage页面时，携带参数

第一种方式：

// 定义HomePage
class HomePage extends StatelessWidget {const HomePage ({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("登录"),),body: ElevatedButton(onPressed: () {// 实现路由跳转Navigator.push(context,MaterialPageRoute(builder: (context) => const MenuPage(title: '菜单123',), // 需要跳转的页面), // 修改路由的名称、信息等);},child: const Text('登录'),),);}
}

// 定义MenuPage
class MenuPage extends StatelessWidget {// 定义接收的字段final String title;const MenuPage({Key? key, required this.title}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(title),),body: ElevatedButton(onPressed: () {Navigator.pop(context);},child: const Text("返回"),),);}
}

第二种方式：

// 定义HomePage
class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("登录"),),body: ElevatedButton(onPressed: () {// 实现路由跳转Navigator.push(context,MaterialPageRoute(builder: (context) => const MenuPage(),// 修改路由的名称、信息等settings: const RouteSettings(name: '菜单', arguments: {"name": '123'}) // 需要跳转的页面),);},child: const Text('登录'),),);}
}

// 定义MenuPage
class MenuPage extends StatelessWidget {const MenuPage({Key? key}) : super(key: key);@override// 接收传参Widget build(BuildContext context) {dynamic argumentsData = ModalRoute.of(context)?.settings.arguments;return Scaffold(appBar: AppBar(title: Text('菜单' + argumentsData.toString()),),body: ElevatedButton(onPressed: () {Navigator.pop(context);},child: const Text("返回"),),);}
}

从MenuPage页面返回HomePage页面时，携带参数

// 定义HomePage
class HomePage extends StatelessWidget {const HomePage ({Key? key}) : super(key: key);;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("登录"),),body: ElevatedButton(onPressed: () async {// 实现路由跳转var result = await Navigator.push(context,MaterialPageRoute(builder: (context) => const MenuPage(),),);print(result);},child: const Text('登录'),),);}
}

// 定义MenuPage
class MenuPage extends StatelessWidget {const MenuPage({Key? key}) : super(key: key);@override// 接收传参Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('菜单'),),body: ElevatedButton(onPressed: () {Navigator.pop(context, {'name': "Navigator.pop传参"});},child: const Text("返回"),),);}
}

往期内容：

【Vue】在Vite+Vue3.0中使用jsx语法开发。

【Vite+vue3】vue3当中keep-alive的使用

【微信公众号开发系列文章】一、微信公众号开发环境搭建

【微信公众号开发系列文章】二、Access token相关操作

Flutter Navigator路由传参相关推荐

Flutter路由传参
Flutter路由传参 1.普通路由 2.路由拦截onGenerateRoute 1.普通路由 //main.dart routes: routes, // 路由跳转 onTap: () {// 跳转 ...
Flutter 路由传参配置
Flutter 路由传参配置在项目目录routers有一个Routers.dart文件(代码如下) import 'package:cai_customer/pages/orderDetail/De ...
微信小程序的路由跳转、路由传参
1.路由跳转声明式:就是指标签实现的跳转方式: 编程式:就是指js事件实现的跳转方式: 原生js跳转:(2种) 声明式:a标签属性 href 编程式:location ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
Vue 踩坑日志 - 有关路由传参的坑
1.有关路由传参 vue中当通过params传过去的参数刷新页面以后会消失,所以可以用query传参.但此时又会出现另一个坑,刷新后数据仍在.但这是针对单个的某个变量的. 如果传入一个对象的话,刷新页 ...
react更改路由入参_react怎么路由传参？
react路由传参(4种方式) 1.通过params传参(刷新页面后参数不消失,参数会在地址栏显示) 路由页面: //注意要配置 /:id 路由跳转并传递参数:链接方式:XX //或: XXjs方式: ...
vue2.0父向子传参，子向父传参，路由传参
父向子传值: //父组件 <selectionGroup v-for="item in tab" :item="item"></selecti ...
vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...

Flutter Navigator路由传参

所有内容首发微信公众号【WEB前端李志杰】，欢迎关注、点赞并转发！

一、命名路由传参

二、构建路由传参

Flutter Navigator路由传参相关推荐

最新文章

热门文章