flutter 路由配置多种跳转与传参

浅浅的花香味﹌ 2023-02-18 12:57 2阅读 0赞

`main.dart文件`

//1. 引入路由跳转的页面
    import 'package:app_ftr/pages/Page1.dart';
    import 'package:app_ftr/pages/Page2.dart';
    
    void main() => runApp(MyApp());
    class MyApp extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         debugShowCheckedModeBanner: false, //隐藏debug
         //路由 (路由表匹配不到就走路由守卫)
         initialRoute: '/',
         routes: { 
           '/Page1': (context) => Page1(),  //2. 配置跳转页面
           '/page2': (context) => Page2()
           //传参
           '/page2': (context,{ arguments}) => Page2(arguments:arguments),
         },
       )  
     }
    
    //跳转方法
    //普通push路由跳转方法 都可传参
    Navigator.pushNamed(context, "/Page2");
    //PushReplacementNamed替换当前路由跳转方法，新push进入的route会替换原来route。
    Navigator.of(context).pushReplacementNamed('/Page2');
    //删除当前路由并跳转到下一路由
    Navigator.of(context).popAndPushNamed('/Page2');
    //删除/Page1路由后面的所有路由 并跳转到/Page2路由
    Navigator.of(context).pushNamedAndRemoveUntil('/Page2', ModalRoute.withName('/Page1'));
    
    //跳转传参
    Navigator.pushNamed(context, "/page2",arguments: { "id":102});
    //接受参数
    class Page2 extends StatefulWidget { 
      final arguments;  //定义一个变量
      Page2({ this.arguments});  //重构
      ...

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter路由跳转详解

lutter中跳转一直记了忘，忘了记，在这里记录下吧：和安卓中的intent类似，跳转新页面需要当前上下文以及需要跳转的页面。如果有数据需要传输也可，参数通过跳转页面...

川长思鸟来/ 2024年04月20日 08:42/ 0 赞/ 85 阅读

相关 vue-router路由跳转&路由传参

对于大多数单页面应用，都推荐使用官方支持的 [vue-router 库][vue-router]。更多细节可以移步 [vue-router文档][vue-router 1] 。

淡淡的烟草味﹌/ 2023年10月06日 17:18/ 0 赞/ 15 阅读

相关 Vue Router 路由跳转传参实践

Vue Router 路由跳转传参实践文章目录 Vue Router 路由跳转传参实践一、动态路由匹配 1、路由配置 2、

╰+哭是因爲堅強的太久メ/ 2023年09月26日 20:27/ 0 赞/ 149 阅读

相关 flutter 路由配置多种跳转与传参

`main.dart文件` //1. 引入路由跳转的页面 import 'package:app_ftr/pages/Page1.dart'; imp

浅浅的花香味﹌/ 2023年02月18日 12:57/ 0 赞/ 3 阅读

相关 Vue路由跳转+路由传参

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： locat

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 678 阅读

相关 Vue - 详解路由跳转及路由传参问题

在Vue中路由跳转有四种方式一. 路由跳转有四种方式二. 不带参路由跳转 1. router-link 2. this.$rou

青旅半醒/ 2021年07月25日 13:30/ 0 赞/ 925 阅读

相关 AngularJs ui-router路由跳转传参

1、在跳转a标签中通过跳转指令设置 ui-sref='state名称({键值对1,键值对2})' 其中,值如果是变量会自动解析,如果是字符串需

妖狐艹你老母/ 2021年07月25日 01:52/ 0 赞/ 431 阅读

相关 flutter 基本路由跳转、传参、末尾浮动按钮组件FloatingActionButton

路由就是组件即dart文件 1、路由跳转 (1)在要跳转的dart文件中先导入被跳转的dart文件 (2)在回调函数中

逃离我推掉我的手/ 2021年07月25日 00:40/ 0 赞/ 460 阅读

相关 flutter 命名路由跳转、传参

无参跳转: 1、引入要跳转的路由组件 2、在MaterialApp与home同级 routes:{ Map类型 '/路由名

心已赠人/ 2021年07月24日 19:08/ 0 赞/ 592 阅读

相关 vue 命名路由跳转、传参

命名路由 (1)通过路由设置的name来导航 (2)编程式导航中,也可以使用命名路由的方式如:this.$router.pu

今天药忘吃喽~/ 2021年07月24日 17:59/ 0 赞/ 645 阅读