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;@overrideState<Store> createState() => _StoreState();
}class _StoreState extends State<Store> {@overrideWidget 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中引入:

​​​​​​​ 

 

最后的效果图:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rust国内sparse镜像源配置

文章目录 1. 遇到问题1.1 问题现象1.2 解决办法 2. 重新设置最新 sparse源3. 更多参考资料3.1 字节源3.2 ustc 源3.3 清华源3.4 其他人的总结 1. 遇到问题 有好一阵子没有更新源和安装软件了&#xff0c; 使用ustc的源&#xff0c; 更新了好一阵子&#xff0c; 最后安装居然还出…

费解的开关

费解的开关 模拟一下开关的过程&#xff1a; 直接对第一行进行开关灯即可&#xff0c;那么第一行开关等的方案有多少个呢&#xff1f; 可以第一个想到的是5次&#xff0c;但实际上是25次&#xff0c;因为没有规定说只能开关一次吧。 那么如何获得这32种方案呢&#xff1f; 可…

十五届海峡两岸电视主持新秀大会竞赛流程

海峡两岸电视主持新秀会是两岸电视媒体共同举办的一项活动&#xff0c;旨在为两岸年轻的电视主持人提供一个展示才华的舞台&#xff0c;促进两岸文化交流和青年交流。本届新秀会是第十二届海峡两岸电视艺术节的重要活动之一。本次竞赛赛制流程如下&#xff1a; &#xff08;1&…

springboot助农管理系统

springboot助农管理系统 成品项目已经更新&#xff01;同学们可以打开链接查看&#xff01;需要定做的及时联系我&#xff01;专业团队定做&#xff01;全程包售后&#xff01; 2000套项目视频链接&#xff1a;https://pan.baidu.com/s/1N4L3zMQ9nNm8nvEVfIR2pg?pwdekjv 提…

初探Java之旅:探寻Java的奥秘

✨个人主页&#xff1a;全栈程序猿的CSDN博客 &#x1f4a8;系列专栏&#xff1a;Java从入门到精通 ✌座右铭&#xff1a;编码如诗&#xff0c;Bug似流星&#xff0c;持续追求优雅的代码&#xff0c;解决问题如同星辰般自如 在计算机编程的世界中&#xff0c;有一门被誉为“千变…

分享87个节日PPT,总有一款适合您

分享87个节日PPT&#xff0c;总有一款适合您 87个节日PPT下载链接&#xff1a;https://pan.baidu.com/s/1eUxA59uQ-hZWWpFzzDuCkQ?pwd6666 提取码&#xff1a;6666 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不易…

affinity好用还是ps好用?2024年最新功能解析

多年来&#xff0c;ps已经有了大量竞争对手。然而每次Photoshop都足以保持其领先地位。开源GIMP和Pixelmator都试图取代Photoshop&#xff0c;不过Photoshop对此不屑一顾。英国Serif公司研发了一款名为Affinity Photo的软件&#xff0c;声称可以叫板ps。今天我们看看有最有可能…

【CPU 架构】x86、x86_64、x64、arm64、aarch64

x86、x86_64、x64、arm64、aarch64 1.服务器分类2.CPU 架构2.1 x86 架构&#xff1a;x86、x86_64、x642.2 arm 架构&#xff1a;arm64 和 aarch64 3.发展历史 1.服务器分类 按照 CPU 体系架构来区分&#xff0c;服务器主要分为两类&#xff1a; 非 x86 服务器&#xff1a;使用…

linux下安装nginx

第一步&#xff1a;压缩包 准备压缩包&#xff0c;最好准备一个稳定的版本&#xff1a;下载地址 我这边选用的是1.24.0双版本号 第二步&#xff1a;解压 在相对应的目录下&#xff0c;执行命令&#xff1a;tar -zxvf nginx-1.18.0.tar.gz 第三步&#xff1a;配置\编译 推荐…

详解—[C++ 数据结构]—AVL树

目录 一.AVL树的概念 二、AVL树节点的定义 三、AVL树的插入 3.1插入方法 四、AVL树的旋转 1. 新节点插入较高左子树的左侧---左左&#xff1a;右单旋 2. 新节点插入较高右子树的右侧---右右&#xff1a;左单旋 3.新节点插入较高左子树的右侧---左右&#xff1a;先左单旋…

07、基于LunarLander登陆器的强化学习案例(含PYTHON工程)

07、基于LunarLander登陆器的强化学习&#xff08;含PYTHON工程&#xff09; 开始学习机器学习啦&#xff0c;已经把吴恩达的课全部刷完了&#xff0c;现在开始熟悉一下复现代码。全部工程可从最上方链接下载。 基于TENSORFLOW2.10 0、实践背景 gym的LunarLander是一个用于…

第十五届蓝桥杯模拟赛(第二期)

大家好&#xff0c;我是晴天学长&#xff0c;本次分享&#xff0c;制作不易&#xff0c;本次题解只用于学习用途&#xff0c;如果有考试需要的小伙伴请考完试再来看题解进行学习&#xff0c;需要的小伙伴可以点赞关注评论一波哦&#xff01;后续会继续更新第三期的。&#x1f4…

解决uview中uni-popup弹出层不能设置高度问题

开发场景&#xff1a;点击条件筛选按钮&#xff0c;在弹出的popup框中让用户选择条件进行筛选 但是在iphone12/13pro展示是正常&#xff0c;但是切换至其他手机型号就填充满了整个屏幕&#xff0c;需要给这个弹窗设置一个固定的高度 iphone12/13pro与其他型号手机对比 一开始…

Linux环境下 make/makefile、文件时间属性 详解!!!

1.项目自动化构建工具make/makefile 1.为什么要有make/makefile 我们先写一个简单的代码&#xff0c;然后编译生成一个可执行程序&#xff0c;下面的内容我们需要知道gcc识和编译链接的一些知识&#xff0c;不清楚的朋友们可以点这里http://t.csdnimg.cn/0QvL8 我们知道要想生…

Java 数据结构篇-用链表、数组实现队列(数组实现:循环队列)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 队列的说明 1.1 队列的几种常用操作 2.0 使用链表实现队列说明 2.1 链表实现队列 2.2 链表实现队列 - 入栈操作 2.3 链表实现队列 - 出栈操作 2.4 链表实现队列 …

9-1定义一个结构体计算该日是本年中的第几天。

#include<stdio.h> struct {int year;int month;int day; }date; int main(){int days;printf("输入年月日&#xff1a;\n");scanf("%d,%d,%d",&date.year,&date.month,&date.day);switch(date.month){case 1:daysdate.day; break;case…

【Element-ui】Checkbox 多选框 与 Input 输入框

文章目录 前言一、Checkbox 多选框1.1 基础用法1.2 禁用状态1.3 多选框组1.4 indeterminate 状态1.5 可选项目数量的限制1.6 按钮样式1.7 带有边框1.8 Checkbox Events1.9 Checkbox Attributes 二、Input 输入框2.1 基础用法2.2 禁用状态2.3 可清空2.4 密码框2.5 带 icon 的输入…

nexus私服开启HTTPS

maven3.8.1以上不允许使用HTTP服务的仓库地址&#xff0c;如果自己搭建的私服需要升级为HTTPS或做一些设置&#xff0c;如果要升级HTTPS服务有两种方式&#xff1a;1、使用Nginx开启HTTPS并反向代理nexus&#xff1b;2、直接在nexus开启HTTPS。这里介绍第二种方式 1、在ssl目录…

计算机网络的分类

目录 一、按照传输介质进行分类 1、有线网络 2、无线网络 二、按照使用者进行分类 1、公用网 (public network) 2、专用网(private network) 三、按照网络规模和作用范围进行分类 1、PAN 个人局域网 2、LAN 局域网 3、MAN 城域网 4、 WAN 广域网 5、Internet 因特…

ChatGPT 的 18 种玩法,你还不会用吗?

你确定&#xff0c;你会使用 ChatGPT 了吗&#xff1f; 今天给大家整理了 18 种 ChatGPT 的用法&#xff0c;看看有哪些方法是你能得上的。 用之前我们可以打开R5Ai平台&#xff0c;可以免费使用目前所有的大模型 地址&#xff1a;R5Ai.com 语法更正 用途&#xff1a;文章…