flutter使用动态路由传参的最小案例

flutter中使用动态路由传递参数的封装案例,子组件页面只需要接收arguments参数即可,参数是一个map,里面包含有所需要的参数,类似于json。在MaterialApp中配置onGenerateRoute,然后动态判断传递参数:

routes列表:

    // 命名路由传参
    Map routes = {
      "/home": (content) => Home(),
      "/search": (context) => SearchPage(),
      // 传递参数的形式
      "/store": (context, {arguments}) => Store(arguments: arguments)
    };

 onGenerateRoute函数:

      onGenerateRoute: (RouteSettings settings) {
        // 获取声明的路由页面函数
        var pageBuilder = routes[settings.name];
        if (pageBuilder != null) {
          if (settings.arguments != null) {
            // 创建路由页面并携带参数
            return MaterialPageRoute(
                builder: (context) =>
                    pageBuilder(context, arguments: settings.arguments));
          } else {
            return MaterialPageRoute(
                builder: (context) => pageBuilder(context));
          }
        }
        return MaterialPageRoute(builder: (context) => HomePage());
      }

然后在路由跳转的时候, 使用pushNamed进行传递参数:

                Navigator.pushNamed(context, "/store",
                    arguments: {"title": "京东首页", "price": 100});

在子组件里面,定义并接收参数:

import "package:flutter/material.dart";

class Store extends StatefulWidget {
  const Store({super.key, this.arguments});

  final dynamic arguments;

  @override
  State<Store> createState() => _StoreState();
}

class _StoreState extends State<Store> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
            "${widget.arguments != null ? widget.arguments['title'] : "ThirdPage"}"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("返回上一家"),
          onPressed: () {
            print("返回上一家");
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

最后的优化,可以将route封装成一个dart包,然后引入到materialApp中,让逻辑更清晰:

router.dart源代码: 

import "package:flutter/material.dart";
import "../main.dart";
import "../pages/home.dart";
import "../pages/search.dart";
import "../pages/store.dart";

// 命名路由传参
Map routes = {
  "/home": (content) => Home(),
  "/search": (context) => SearchPage(),
  "/store": (context, {arguments}) => Store(arguments: arguments)
};

// 定义一个函数,并返回MaterialPageRoute
var onGenerateRoute = (RouteSettings settings) {
  var pageBuilder = routes[settings.name];
  if (pageBuilder != null) {
    if (settings.arguments != null) {
      // 创建路由页面并携带参数
      return MaterialPageRoute(
          builder: (context) =>
              pageBuilder(context, arguments: settings.arguments));
    } else {
      return MaterialPageRoute(builder: (context) => pageBuilder(context));
    }
  }
  return MaterialPageRoute(builder: (context) => HomePage());
};

在materialApp中引入:

​​​​​​​ 

 

最后的效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/214690.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MobaXterm连接相关

其实最终解决的方法&#xff0c;还是&#xff0c;因为要远程连接的是个局域网ip&#xff0c;我所在的ip和要连接的这个不在同一个局域网内&#xff0c;需要实验室搭的VPN才行。 甚至&#xff0c;我连防火墙都没关&#xff0c;也可以连接 至于修改密码&#xff0c;passwd&#…

猜数字赢金币

充值金币后开始游戏&#xff0c;猜中奖励10金币退出&#xff0c;不中扣除1金币继续。 (笔记模板由python脚本于2023年12月03日 21:52:23创建&#xff0c;本篇笔记适合熟悉程序函数式编程&#xff0c;熟练掌握基本数据类型的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&…

RocketMQ-RocketMQ集群实践

搭建RocketMQ可视化管理服务 下载可视化客户端源码下载 | RocketMQ 这里只提供了源码&#xff0c;并没有提供直接运行的jar包。将源码下载下来后&#xff0c;需要解压并进入对应的目录&#xff0c;使用maven进行编译。(需要提前安装maven客户端) mvn clean package -Dmaven.t…

项目实战一-性能测试筑基

这里写目录标题 一、为什么程序会出现性能问题、性能问题是怎么出现的&#xff1f;二、功能测试和性能测试的区别是什么&#xff1f;三、核心性能指标1、用户角度核心a、响应时间&#xff1a;b、并发量 2、成本角度3、运维角度面试题、并发量和吞吐量得区别&#xff1f;a、吞吐…

一些后端测试的东西

后端测试都测试些什么 接口测试最小单元测试联调测试 接口测试 接口测试要素 可重复性 异常覆盖 环境一致 如何进行方便的接口测试 测试工具&#xff1a; idea-httpRequest &#xff0c; apifox , postman, jmeter 如何使用idea进行高效的接口测试 编写接口 启动项目直接…

AD生产BOM表时如何隐藏不需要的器件记录

在完成图纸设计号通常需要生产BOM表&#xff0c;以便采购等&#xff0c;如果不做一些操作&#xff0c;往往输出的BOM表中包含一些非需要采购的器件&#xff0c;如下图 这时就需要对原理图或者PCB图做一些处理&#xff0c;以原理图为例&#xff0c;在需要屏蔽的器件上双击&#…

【C语言】扫雷小游戏初学者版

成功的秘诀就是每天都比别人多努力一点。 今天给大家带来一款非常经典的小游戏——扫雷的实现和讲解 这里是目录 前言整体框架1.打印菜单2.创建二维数组3.初始化棋盘4.打印棋盘5.布置棋盘中的雷6.排查雷和统计雷总体代码test.cgame.cgame.h 进阶&#xff08;递归展开&#xff0…

力扣572:另一棵树的子树

力扣572&#xff1a;另一棵树的子树 给你两棵二叉树 root 和 subRoot 。检验 root 中是否包含和 subRoot 具有相同结构和节点值的子树。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 二叉树 tree 的一棵子树包括 tree 的某个节点和这个节点的所…

SpringBootAdmin

SpringBootAdmin 文章目录 SpringBootAdmin创建SpringBootAdmin服务端创建SpringBootAdmin客户端启动应用 总结 github地址 https://github.com/codecentric/spring-boot-admin 可以查到所有的版本号 创建SpringBootAdmin服务端 创建springBoot项目的时候&#xff0c;在ops选项…

【Vue】Vue CLI 脚手架(Vue Command Line Interface)安装教程(通过npm)

前言 Vue CLI&#xff08;Vue Command Line Interface&#xff09;是一个基于Vue.js的官方脚手架工具&#xff0c;用于快速搭建和管理Vue.js项目。它提供了一套完整的开发工具和配置&#xff0c;包括项目初始化、开发服务器、热重载、构建和打包等功能。 Vue CLI使用了Webpac…

使用PCSS实现的实时阴影效果

PCSS的技术可以使得阴影呈现出近硬远软的效果&#xff0c;并且能够实时实现。 其核心理念是通过模拟光源的面积来产生更自然、更柔和的阴影边缘。 具体步骤&#xff1a; 1、生成shadowmap 2、在进行阴影的比较时候进行平均&#xff0c;并非之前的shadow map 或者之后完全的阴影…

laraval6.0 GatewayWorker 交互通信

laravel 6.0 GatewayWorker 通讯 开发前准备下载 GatewayWorker 及操作方式前端demo测试效果项目中安装GatewayClient 开发前准备 GatewayClient 官网&#xff1a;https://www.workerman.net/ 当前使用的是宝塔操作 下载 GatewayWorker 及操作方式 前端demo 测试效果 项目中安…

unordered_map与unordered_set的实现(含迭代器)

unordered_map与unordered_set的实现 文章目录 unordered_map与unordered_set的实现前言一、问题一HashTable.h 二、问题二&问题三1.封装时如何取出key2.不同类型key如何建立对应关系 三、问题四&问题五问题四问题五 四、实现代码MyUnorderedSet.hMyUnorderedMap.hHash…

文案二次创作软件,文案二次创作的软件

文案创作成为品牌传播和营销不可或缺的一环。对于许多从业者而言&#xff0c;文案创作常常是一项既耗时又耗力的工作。为了解决这一文案创作的难题&#xff0c;市场上涌现出了众多的智能文案生成工具。我们通过对这些工具的介绍和分析&#xff0c;希望能够为你提供一些在文案创…

Kafka 架构深度解析:生产者(Producer)和消费者(Consumer)

Apache Kafka 作为分布式流处理平台&#xff0c;其架构中的生产者和消费者是核心组件&#xff0c;负责实现高效的消息生产和消费。本文将深入剖析 Kafka 架构中生产者和消费者的工作原理、核心概念以及高级功能。 Kafka 生产者&#xff08;Producer&#xff09; 1 发送消息到…

【C++】异常处理 ⑦ ( 异常类的继承层次结构 | 抛出 / 捕获 多个类型异常对象 | 抛出子类异常对象 / 捕获并处理 父类异常对象 )

文章目录 一、抛出 / 捕获 多个类型异常对象1、抛出 / 捕获 多个类型异常对象2、操作弊端3、完整代码示例 二、异常类的继承层次结构1、抛出子类异常对象 / 捕获并处理 父类异常对象2、完整代码示例 - 抛出子类异常对象 / 捕获并处理 父类异常对象 自定义的 异常类 , 可能存在 …

prometheus部署及与grafana结合应用

一、prometheus 介绍 prometheus server 是 Prometheus组件中的核心部分&#xff0c;负责实现对监控数据的获取&#xff0c;存储以及查询。它会定期从静态配置的监控目标或者基于服务发现自动配置的自标中进行拉取数据&#xff0c;当新拉取到的数据大于配置的内存缓存区时&…

Python 入门

目录 编译性语言 解释型语言 Python语言介绍 Python安装 配置环境变量 Pycharm安装 Pycharm基本使用 编译性语言 解释型语言 计算机是不能理解高级语言的&#xff0c;更不能直接执行高级语言&#xff0c;它只能直接理解机器语言&#xff0c;所以使用任何高级语言编写的程…

vue3项目脚手架如何使用swiper, ‘vue-awesome-swiper‘报错解决(简单示例)

目录 前言 使用方法 效果图 1.下载swiper 2. 写入需要的页面 3.在对应页面引入组件 4.推荐页完整代码 前言 Vue3和Vue2在使用swiper时是有差别的&#xff0c;Vue3引入swiper需要注意Vu3的版本和swiper的版本&#xff0c;如果不匹配通常会报错 如下&#xff1a;当引用版本过…

canvas基础:绘制虚线

canvas实例应用100 专栏提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。 canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例…