首页 > 其他分享 >Flutter 耗时监控 | 路由名为空原因分析

Flutter 耗时监控 | 路由名为空原因分析

时间:2023-01-27 07:00:13浏览次数:61  
标签:name MaterialPageRoute Route dart 耗时 Flutter 路由 页面

前言

最近群里遇到获取Route名为空的问题,当时没在意。。。

Untitled.png

直到自己在监控页面启动耗时,需要确定当前页面是哪个从而方便标记它加载的耗时时,遇到同样 route.settings.name 为空问题,模拟场景如下:

  1. 在 main.dart 页面中点击 + 按钮跳转到 TestPage2 页面。
  2. MaterialApp 中设置路由守卫并在路由守卫中打印 route 名。

Untitled 1.png
main.dart

Untitled 2.png
launch_observer.dart

Untitled 3.png
TestPage2.dart

路由守卫中打印结果如下:

Untitled 4.png

可以看出

  • 应用启动进入 main 打印是正确的,之前没有页面,进入时候打印 route = /
  • 进入 TestPage2 时,previewousRoute 的 name = / 正确,但是当前 route 的 settings.name 却为 null ,这就比较奇怪了。

我试着复现文章开头的例子,代码如下:

  1. main.dart 不变,点击 + 跳转到 TestPage2
  2. 在 TestPage2 中获取路由参数和路由名字

Untitled 5.png

结果发现:name 的值仍然为 null;

Untitled 6.png

## 问题分析

MaterialPageRoute 继承关系

Untitled 7.png

最终我们要得到的 name 其实是 Route 内部的 RouteSettings 对象的 name。

Untitled 8.png

而通过继承关系追溯,最终 Route 中的 RouteSettings② 由 MaterialPageRoute① 传过来。

Untitled 9.png

Untitled 10.png

解决办法

很简单,在跳转页面之前给 MaterialPageRoute 设置 settings 属性。

Untitled 11.png

这样就可以接受到 name 和传递过去参数了,如图:

Untitled 12.png

能不能自动设置 RouteSettings

答案: 拿不到。

思路一:

有这个想法是因为涉及到老代码的迁移,很多老代码不想一个个改加 Settings,偷个懒。而且平时用的时候大部分情况下都不会带 settings 属性。

当然跟我有同样想法的人也有 flutter - How to get the Widget Class name from the builder object in MaterialPageRoute - Stack Overflow

Untitled.jpeg

尝试如下:

Untitled 13.png

PS: 哪位大佬有更好解决自动添加 RouteSetting 属性办法希望不吝赐教,多谢。

换个思路

群里大佬指出可以尝试换个思路: aop buildpage。这里找到个帖子是这种思路,没验证各位大大可自行辨别,哈哈。

Flutter aspectd(五)全局监控 flutter 生命周期

核心点

当我们要打开一个新的 flutter 页面会执行 Navigator.pushNamed(context, RouteHelper.firstPage),最终会执行 navigator.dart 中的 handlePush 方法,hook 该方法,从该方法中可以得到我们要启动页面的 Route,以及当前的页面 Route。

Untitled 14.png

总结

  1. Route.settings.name 无法获取原因是 push/pushNamed 时 MaterialPageRoute 没设置 RouteSettings 属性。
  2. 如果老项目有埋点等需求需要监控页面名,建议老老实实给每个 MaterialPageRoute 加 RouteSettings 属性比较稳妥。
  3. 最最推荐的做法是通过 APT 方式模块化路由功能,这样应用中所有 MaterialPageRoute 生成过程就可以收拢,生成代码时将 RouteSettings 属性添加上即可。

如果觉得文章对你有帮助,点赞、收藏、关注、评论,一键四连支持,你的支持就是我创作最大的动力。

❤️ 本文原创听蝉 公众号:码里特别有禅 欢迎关注原创技术文章第一时间推送 ❤️

PS: 文中所有源码获取方式:公众号后台回复 “route”

参考链接

flutter - How to get the Widget Class name from the builder object in MaterialPageRoute - Stack Overflow
Flutter aspectd(五)全局监控flutter生命周期 - 掘金

标签:name,MaterialPageRoute,Route,dart,耗时,Flutter,路由,页面
From: https://www.cnblogs.com/xuge2it/p/17068512.html

相关文章

  • Flutter框架渲染流程与使用
    Flutter简述Flutter是一个UISDK,可以进行移动端(iOS,Android),Web端,桌面,它是一个跨平台解决方法。Flutter的特点:美观,快速,高效,开放。美观:Flutter内置了美丽的MaterialDes......
  • vue路由
    视频链接:https://www.bilibili.com/video/BV1Zy4y1K7SH?p=118什么是vue路由?答:概念是这么说的嗷:路由的本质就是一种对应关系,比如说url地址和资源之间的对应关系。我来简......
  • Flutter项目国际化(本地化,全球化,多语言)
    目标在Flutter项目中实现国际化,支持多种语言。开发工具下载IntelliJIDEA安装插件:FlutterIntl安装完成后重启IDE。使用Intl对项目进行初始化添加语言添加内......
  • 路由器分组转发算法
    以下内容参考<<计算机网络第五版>>谢希仁编著p128(1)首先从IP数据报首部提取出目的主机的IP地址D,得出其所在的网络N。(2)若N就是与此路由器直接相连的某个网络,则进行直接交......
  • Knative路由管理
    Knative通过控制入口网关的流量分配来实现服务的路由管理。Knative为每个服务生成唯一的域名,入口网关会根据域名转发请求到对应的服务。1定制Knative服务的主域名Knativ......
  • 路由
                                                ......
  • 路由器功能------BFD (Bidirectional Forwarding Detection)双向转发检测
    原理:1.状态迁移BFD会话建立遵循三次握手,BFD有四种状态:Down:会话处于Down或者刚刚创建Init:已经能够与对端系统通信,本端希望使会话进入Up状态Up:会话已经建立AdminDown:会......
  • 华为路由器 OSPF单区域配置
    拓扑图一、R1 路由器<Huawei>sys[Huawei]sysR1[R1]uninen[R1]dhcpenable[R1]intg0/0/0[R1-GigabitEthernet0/0/0]ipaddr192.168.20.224#配置DHCP[R1-GigabitEthe......
  • Nginx同一个worker进程先后处理耗时不同的请求
    epoll监控的事件src/event/modules/ngx_epoll_module.cEPOLLIN:连接上有数据可读(包括TCP连接的远端主动关闭连接)EPOLLLPRI:连接上要读紧急数据EPOLLOUT:连接上写入数据......
  • VueRouter路由嵌套
    1.前言本小节我们介绍如何嵌套使用VueRouter。嵌套路由在日常的开发中非常常见,如何定义和使用嵌套路由是本节的重点。同学们在学完本节课程之后需要自己多尝试配置路由。2......