iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >FlutterNavigator路由传参的实现
  • 190
分享到

FlutterNavigator路由传参的实现

2024-04-02 19:04:59 190人浏览 安东尼
摘要

目录一、命名路由传参二、构建路由传参第一种方式:第二种方式:Flutter中的默认导航分成两种,一种是命名的路由,一种是构建路由。 一、命名路由传参 应用入口处定义路由表 class

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

一、命名路由传参

应用入口处定义路由表

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 隐藏预览中的debug
      title: 'Flutter Demo',
      routes: {
        '/': (context) => const HomePage(),
        "menu": (context) => const MenuPage()
      },
    );
  }
}
// 定义HomePage
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget 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);
  @override
  Widget 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);
  @override
  Widget 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);
  @override
  Widget 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);;
  @override
  Widget 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("返回"),
      ),
    );
  }
}

到此这篇关于Flutter Navigator路由传参的实现的文章就介绍到这了,更多相关Flutter Navigator路由传参内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: FlutterNavigator路由传参的实现

本文链接: https://www.lsjlt.com/news/146857.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • FlutterNavigator路由传参的实现
    目录一、命名路由传参二、构建路由传参第一种方式:第二种方式:Flutter中的默认导航分成两种,一种是命名的路由,一种是构建路由。 一、命名路由传参 应用入口处定义路由表 class...
    99+
    2024-04-02
  • react路由如何实现传参
    这篇文章主要介绍react路由如何实现传参,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!第一种传参方式,动态路由传参通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示...
    99+
    2023-06-14
  • React中如何实现路由传参
    这篇文章将为大家详细讲解有关React中如何实现路由传参,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。react组件通信的其中一种方式--路由传参(react组件通信的方式有多种,如props、事件回调、...
    99+
    2023-06-25
  • vue中怎么实现路由传参
    本篇文章为大家展示了vue中怎么实现路由传参,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。在vue路由中,支持3中传参方式。场景,点击父组件的li元素跳转到子组件中...
    99+
    2024-04-02
  • Flutter Navigator路由传参怎么实现
    今天小编给大家分享一下Flutter Navigator路由传参怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2023-06-30
  • Vue中如何实现路由传参
    本篇文章给大家分享的是有关Vue中如何实现路由传参,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。情景模拟:A页面中,有一些div是根据A中的b...
    99+
    2024-04-02
  • react中路由跳转及传参的实现
    目录1.useNavigate2.useLocation3.示例1.useNavigate useNavigate 是 React Router v6 中新增的一个 hoo...
    99+
    2023-05-19
    react 路由跳转 react 路由传参
  • VUE怎么实现路由传递参数
    本篇内容介绍了“VUE怎么实现路由传递参数”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在路由时传递参数,一般有两种形式,一种是拼接在url...
    99+
    2023-07-04
  • Vue路由传参加密怎么实现
    本篇内容介绍了“Vue路由传参加密怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!首先,创建一个base64.jsconst ...
    99+
    2023-07-04
  • React路由参数传递与嵌套路由的实现详细讲解
    目录1. 页面路由参数传递1.1 动态路由参数1.2 search字符串1.3 页面参数隐式传递2. 嵌套路由1. 页面路由参数传递 1.1 动态路由参数 描述: 以“/...
    99+
    2024-04-02
  • Flutter路由传递参数及解析实现
    上一篇Flutter页面路由及404路由拦截实现介绍了使用路由来实现页面的跳转,从而简化页面之间的耦合,并可以实现路由拦截。在实际开发中,我们经常会需要在页面跳转的时候携带路由参数...
    99+
    2024-04-02
  • vue3中路由传参query、params及动态路由传参详解
    目录一、query传参二、params传参三、动态传参四、query传参和params传参的区别总结一、query传参 编程式导航 使用router.push 或者 router.r...
    99+
    2024-04-02
  • vue路由如何传参
    在vue中实现路由传参的方法有:1.通过params实现传参;2.通过query实现传参;3.调用$router.push实现传参;具体方法如下:通过params实现路由传参使用路由属性中的name来匹配路由,在通过params传递参数,但...
    99+
    2024-04-02
  • Vue通过路由实现页面间参数的传递
    目录在Vue项目开发中,页面之间传递参数有很多种方法1.路由传递2.sessionStorage/localStorage缓存的形式进行传递3.父子组件之间的传值 4.使用...
    99+
    2023-05-17
    vue路由实现页面参数传递 vue页面参数传递 vue路由参数传递
  • vuejs路由的传参及路由props配置详解
    目录前言方式1-使用query方式命名路由方式2-路由的params参数query与params的区别路由的props配置路由配置的布尔模式路由配置的对象模式路由配置函数模式总结前言...
    99+
    2024-04-02
  • Vue路由组件通过props配置传参的实现
    目录一、基于params参数传递1、index.js(路由配置)2、Box_1.vue(父路由组件 - 发送参数) 3、Menu_1.vue(子路由组件 - 接收参数)二、...
    99+
    2024-04-02
  • Spring Boot/VUE中如何实现路由传递参数
    这篇文章将为大家详细讲解有关Spring Boot/VUE中如何实现路由传递参数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在路由时传递参数,一般有两种形式,一种是拼接...
    99+
    2024-04-02
  • vue3中如何使用router路由实现跳转传参
    这篇文章主要介绍了vue3中如何使用router路由实现跳转传参的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue3中如何使用router路由实现跳转传参文章都会有所收获,下面我们一起来看看吧。一、路由跳转首...
    99+
    2023-07-05
  • vue3中怎么使用router路由实现跳转传参
    本文小编为大家详细介绍“vue3中怎么使用router路由实现跳转传参”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3中怎么使用router路由实现跳转传参”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一...
    99+
    2023-07-06
  • GIN的路由以及传参问题
    目录1.路由:2.传参当get传参的时候(url上显示的参数)当POST传参的时候(请求写入body)1.路由: func main() { r := gin.Default...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作