Flutter 命名路由

我们可以通过创建一个新的Route,使用Navigator来导航到一个新的页面,但是如果在应用中很多地方都需要导航到同一个页面(比如在开发中,首页、推荐、分类页都可能会跳到详情页),那么就会存在很多重复的代码。在这种情况下,我们就可以使用 命名路由。
优点:

  • 名称路由是将名字和路由的映射关系,在一个地方进行统一管理
  • 有了命名路由,我们可以通过Navigator.pushNamed() 方法来跳转到新的页面

命名路由怎么使用?
1、可以放在MaterialApp的 initialRouteroutes
initialRoute : 设置应用程序从哪一个路由开始启动,设置了该属性,就不需要再设置home 属性了
2、routes:定义名称和路由之间的映射关系,类型为 Map<String, WidgetBuilder>

基本代码如下:

return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue, splashColor: Colors.transparent),initialRoute: "/",routes: {"/home": (ctx) => HYHomePage(),"/detail": (ctx) => HYDetailPage()},
);

在使用跳转的时候则:

_onPushTap(BuildContext context) {Navigator.of(context).pushNamed("/detail");
}

为了更加规范使用路由,则在开发中让每个界面都对 routeName 统一,这样每个界面都定义一个路由常量来使用

class HYHomePage extends StatefulWidget {static const String routeName = "/home";
}class HYDetailPage extends StatelessWidget {static const String routeName = "/detail";
}

为了更好的管理路由映射,则单独创建一个文件进行管理
管理路由文件代码如下:

import 'package:flutter/material.dart';
import 'package:list/douban/Data/my_provider_demo.dart';
import '../Page/detail.dart';
import '../Page/about.dart';
import '../Page/un_known.dart';
import 'package:list/douban/main.dart';class HYRouter {static final Map<String, WidgetBuilder> routes = {MyHomePage1.routeName:(context) => MyHomePage1(),// 默认界面Deatail.routeName:(context) => Deatail(),AboutPage.routeName:(context) => AboutPage(),
};
// 默认界面static final String initialRoute = MyHomePage1.routeName;// 钩子函数
static final RouteFactory generateRoute = (settings) {if (settings.name == Deatail.routeName){return MaterialPageRoute(builder: (context){// settings.argumentsreturn Deatail();});}return null;
};// 错误界面
static final RouteFactory unKnownRoute = (settings)  {return MaterialPageRoute(builder: (context) {return UnknownPage();});
};}

则,MaterialApp 代码也需要优化

Widget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),routes: HYRouter.routes,onGenerateRoute:HYRouter.unKnownRoute,onUnknownRoute: HYRouter.unKnownRoute,initialRoute: HYRouter.initialRoute,);

跳转

 TextButton(child: Text("打开详情"),onPressed: () {print("点击打开详情");final result = Navigator.of(context).pushNamed(Deatail.routeName,arguments: "去详情界面的数据");result.then((value) {print("${value}");});},)

在跳转的界面接受参数

Widget build(BuildContext context) {final message = ModalRoute.of(context)?.settings.arguments as String;}

上述就完成最基本的命名路由的注册,映射关系,以及跳转。

  • 路由钩子 onGenerateRoute的钩子函数
    加入我们有一个界面已经创建好,并且传入对应的参数message,并且已经有一个 对应的构造方法,此时如果将其放到路由映射表中则不合适。因为该界面必需要求传入一个参数,这时候我们就可以使用onGenerateRoute的钩子函数
  • 当我们通过pushNamed进行跳转,但是对应的name没有在routes中有映射关系,那么就会执行onGenerateRoute钩子函数;
  • 我们可以在该函数中,手动创建对应的Route进行返回;
  • 该函数有一个参数RouteSettings,该类有两个常用的属性:
    - name: 跳转的路径名称
    - arguments:跳转时携带的参数
onGenerateRoute: (settings) {if (settings.name == "/about") {return MaterialPageRoute(builder: (ctx) {return HYAboutPage(settings.arguments);});}returnnull;
},
  • onUnknownRoute
    如果我们打开的一个路由名称是根本不存在,这个时候我们希望跳转到一个统一的错误页面。
onUnknownRoute: (settings) {return MaterialPageRoute(builder: (ctx) {return UnknownPage();});
},

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

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

相关文章

Pytest 重复执行用例插件----pytest-repeat

前言 在自动化过程中&#xff0c;想要重复执行一条脚本&#xff0c;查看他的稳定性&#xff0c;如果是在unittest框架中&#xff0c;可能会使用for一直循环这条用例&#xff0c;但是当我们使用pytest框架后&#xff0c;我们就可以通过某些插件来实现这个功能了。今天介绍的这个…

【Spring】(四)Bean 的作用域和生命周期

文章目录 前言一、Bean 的作用域1.1 被修改的 Bean 案例1.2 作用域的定义1.3 Bean 的六种作用域1.4 Bean 作用域的设置 二、Spring 的执行流程 和 Bean 的生命周期2.1 Spring 的执行流程2.2 Bean 的生命周期2.3 Bean 生命周期的演示 前言 Bean 是 Spring 框架中的一个核心概念…

铠甲网络面试(部分)

如何用Redis实现分布式锁的&#xff1f;如果设置的超时时间到了&#xff0c;但占有锁的任务还未完成&#xff0c;怎么办&#xff1f;答案&#xff1a;定时任务进行检测与续约&#xff0c;具体参考 本博----《专题三分布式系统》之《第三章 集中式缓存Redis》之 《第三节 Redis底…

集成学习:机器学习模型如何“博采众长”

前置概念 偏差 指模型的预测值与真实值之间的差异&#xff0c;它反映了模型的拟合能力。 方差 指模型在不同的训练集上产生的预测结果的差异&#xff0c;它反映了模型的稳定性。 方差和偏差对预测结果所造成的影响 在机器学习中&#xff0c;我们通常希望模型的偏差和方差都…

嵌入式面试笔试刷题(day4)

文章目录 前言一、中断的概念二、中断的优缺点是什么1.优点2.缺点 三、软中断的概念什么时候用软中断1.概念2.什么时候用软中断 四、软中断和函数调用的区别五、一个函数&#xff0c;在main和中断中都要同时调用&#xff0c;这个函数要做什么设计六、volatile 关键字常用例子总…

C高级第三讲

1、思维导图 2、输入一个文件名&#xff0c;判断是否为shell脚本文件&#xff0c;如果是脚本文件&#xff0c;判断是否有可执行权限&#xff0c;如果有可执行权限&#xff0c;运行文件&#xff0c;如果没有可执行权限&#xff0c;给文件添加可执行权限。 #!/bin/bash read -p …

【性能测试】性能数据采集工具nmon安装使用及报告参数含义详解

目录 nmon nmon下载 解压安装 启动 数据采集配置 生成图形结果 nmon报告中的参数含义 资料获取方法 nmon nmon是一种在AIX与各种Linux操作系统上广泛使用的监控与分析工具&#xff0c;它能在系统运行过程中实时地捕捉系统资源的使用情况&#xff0c;并且能输出结果到文…

c语言——求n之内的素数和

//求n之内的素数和 //列如&#xff1a;2、3、5等 #include<stdio.h> #include<math.h> int main() {int i,j,k,n0;scanf("%d",&n);for(i2;i<n;i){k(int)sqrt(i);for(j2;j<k;j)if(i%j0)break;if(j>k){printf("%d,",i);n;if(n%50)p…

《每天5分钟玩转kubernetes》读书笔记

笔记 概念 Pod是脆弱的&#xff0c;但应用是健壮的。 kubelet运行在Cluster所有节点上&#xff0c;负责启动Pod和容器。kubeadm用于初始化Cluster。kubectl是k8s命令行工具。通过kubectl可以部署和管理应用&#xff0c;查看各种资源&#xff0c;创建、删除和更新各种组件。 …

Python(六十六)字典生成式

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

VX-API-Gateway开源网关技术的使用记录

VX-API-Gateway开源网关技术的使用记录 官网地址 https://mirren.gitee.io/vx-api-gateway-doc/ VX-API-Gateway(以下称为VX-API)是基于Vert.x (java)开发的 API网关, 是一个分布式、全异步、高性能、可扩展、轻量级的可视化配置的API网关服务官网下载程序zip包 访问 https:/…

【100天精通python】Day26:文件和IO操作_文件指针的定位与移动,序列化与反序列化

目录 专栏导读 1 文件的基本操作 1.1 参考 1.2 获取文件属性&#xff1a; 2 定位和移动文件指针 3 序列化和反序列化 3.1 序列化与反序列化概述 3.2JSON序列化与反序列化 JSON序列化&#xff1a; JSON反序列化&#xff1a; 3.3 pickle 序列化与反序列化 pickle 序列…

Yolov8-pose关键点检测:模型部署篇 | yolov8-pose.onnx python推理

💡💡💡本文解决什么问题:Yolov8-pose关键点训练得到的模型转换成onnx格式在python下完成推理 Yolov8-Pose关键点检测专栏介绍:https://blog.csdn.net/m0_63774211/category_12398833.html ✨✨✨手把手教你从数据标记到生成适合Yolov8-pose的yolo数据集; 🚀🚀�…

vue项目中使用节流throttle 和 防抖debounce

一、节流和防抖的定义 节流&#xff1a;频繁输入、频繁操作的时候&#xff0c;保持一定频率连续触发&#xff0c;比如 scroll 事件、click 事件。 防抖&#xff1a;频繁输入、频繁操作的时候&#xff0c;在最后才触发事件处理函数&#xff0c;比如 input 输入事件。 关于节流…

【前端】鼠标事件计算与圆心形成的角度

在业务需求中&#xff0c;常常出现一些我们无法完成的效果图&#xff0c;这时需要UI切图给我们&#xff0c;而切图后不可避免的一些点击事件无法方便的监听 如该图圆环&#xff0c;其实是一张单独的图片&#xff0c;这种情况下只能通过js判断用户点击、拖动的鼠标位置&#xf…

carla中lka实现(一)

前言&#xff1a; 对于之前项目中工作内容进行总结&#xff0c;使用Carla中的车辆进行lka算法调试&#xff0c;整体技术路线&#xff1a; ①在Carla中生成车辆&#xff0c;并在车辆上搭载camera&#xff0c;通过camera采集图像数据&#xff1b; ②使用图像处理lka算法&#…

Docker-Compose编排与部署(lnmp实例)

第四阶段 时 间&#xff1a;2023年8月3日 参加人&#xff1a;全班人员 内 容&#xff1a; Docker-Compose编排与部署 目录 一、Docker Compose &#xff08;一&#xff09;概述 &#xff08;二&#xff09;Compose适用于所有环境&#xff1a; &#xff08;三&#xf…

Docker实战-操作Docker容器实战(二)

导语   上篇分享中,我们介绍了关于如何创建容器、如何启动容器、如何停止容器。这篇我们来分享一下如何操作容器。 如何进入容器 可以通过使用-d参数启动容器后会进入后台运行,用户无法查看容器中的信息,无法对容器中的信息进行操作。 这个时候如果我们需要进入容器对容器…

第十二章 配置Production - 添加HL7序列管理器

文章目录 第十二章 配置Production - 添加HL7序列管理器添加HL7序列管理器创建HL7序列管理器集成和配置 HL7 序列管理器以编程方式访问 HL7 序列数据ApplicationFacilityThreadTypeNextSequenceNumber 第十二章 配置Production - 添加HL7序列管理器 添加HL7序列管理器 HL7消息…

人脸识别场景下Faiss大规模向量检测性能测试评估分析

在前面的两篇博文中&#xff0c;主要是考虑基于之前以往的人脸识别项目经历结合最近使用到的faiss来构建更加高效的检索系统&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《基于facenetfaiss开发构建人脸识别系统》 Facenet算法的优点&#xff1a;高准确率&#…