Flutter调优--深入探究MediaQuery引起界面Rebuild的原因及解决办法

这篇具有很好参考价值的文章主要介绍了Flutter调优--深入探究MediaQuery引起界面Rebuild的原因及解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

我们可以通过MediaQuery.of(context)方法获取到一些设备和系统的相关信息,比如状态栏的高度、当前是否是黑暗模式等等,使用起来相当方便,但是也要注意可能引起的页面rebuild问题。本文会介我们可以通过MediaQuery.of(context)方法获取到一些设备和系统的相关信息,比如状态栏的高度、当前是否是黑暗模式等等,使用起来相当方便,但是也要注意可能引起的页面rebuild问题。本文会介绍一个典型的例子,并深入源码来探讨引起rebuild的原因,最后介绍避免rebuild的几个办法。
绍一个典型的例子,并深入源码来探讨引起rebuild的原因,最后介绍避免rebuild的几个办法。

典型例子

以快递App中的查快递场景举例,首页用MediaQuery.of(context).padding.top获取了状态栏高度,用户点击“查快递”按钮会跳转到查快递界面,在查快递界面,用户输入单号可进行查询操作。


当首页的build方法被调用时,会输出我们提前加好的日志。我们发现,当查快递界面的键盘弹出时,首页的build方法被调用了多次:

主界面的build代码如下:

源码探究

既然是因为主界面在build方法里使用了MediaQuery.of(context),从而导致当键盘弹出/隐藏时进行rebuild操作,那么就先来看下MediaQuery类。

MediaQuery

其继承自InheritedWidget,自身并没有重写createElement方法,从flutter三棵树的角度讲,对应的Element即为InheritedElement。有两个属性,data和child,我们可以从data中获取一些设备/系统相关的属性。

另外还有两个比较重要的方法:

fromWindow(key : Key, child : Widget)

此方法直接返回_MediaQueryFromWindow对象,后面会详细介绍。

of(context : BuildContext)

方法里调用了dependOnInheritedWidgetOfExactType,接下来我们详细分析下背后的调用流程。

MediaQuery.of(context) 调用流程

入参是context,本例中的主界面是StatelessWidget,那么这里的context便是StatelessElement。整体调用流程如下:

dependOnInheritedWidgetOfExactType

_inheritedWidgets列表中查询是否有MediaQuery类型的InheritedElement,从三棵树的角度讲,就是从当前节点一直向上查找,找到最近的MediaQuery控件。如果找到,则调用dependOnInheritedElement方法(一般情况下是一定能找到的,下面再详细介绍)。

dependOnInheritedElement

此方法负责将找到的InheritedElement(也就是MediaQuery对应的Element)存起来,并且调用InheritedElement#updateDependencies方法。

updateDependencies

setDependencies

最后两个方法很简单,其作用是将主页对应的StatelessElement存储到了MediaQuery对应的InheritedElement#_dependents中。

研究完MediaQuery.of(context)背后的原理,我们可以知道:通过调用of方法,主界面对应的ElementMediaQuery建立了绑定关系,MediaQuery对应的InheritedElement存储了主界面Element的引用。

Rebuild起点

当介绍dependOnInheritedWidgetOfExactType方法时,我们提道:从当前节点往父节点寻找,一般情况下是一定能找到的MediaQuery控件的。这是因为在WidgetsApp里会自动给我们创建一个根MediaQuery

main方法里,无论使用CupertinoApp还是MaterialApp,最后都会在内部创建WidgetsApp。我们直接看_WidgetsAppState#build方法里的一个代码片段:

会首先检查widget.useInheritedMediaQuery,这个属性默认为false。如果你创建MaterialApp/CupertinoApp时,没有设置useInheritedMediaQuery属性,或者设置了这个属性为null,但找不到MediaQueryData,那么这里就会调用MediaQuery.fromWindow方法。

上面介绍MediaQuery#fromWindow时,我们知道它会创建_MediaQueryFromWindow控件。

_MediaQueryFromWindow的代码不是很多,把和本文相关的代码全部贴出来了,大家可以自己看下,代码如上图所示。

build方法里创建了MediaQuery控件,并实现了didChangeMetrics方法,当手机发生旋转、键盘弹出/隐藏时就会调用此方法,didChangeMetrics内部又调用了setSate,从而导致build方法被重新调用。

通过flutter三颗树的原理我们可以知道,上述所说的“build方法被重新调用”涉及到MediaQueryFromWindow对应的ElementupdateChild方法,简单看下updateChild的内部处理规则:

对MediaQueryFromWindow而言,每次都会创建新的MediaQuery Widget,根据Element#updateChild源码(不是本文讨论重点,不再详细分析其源码)得知,最终会调用MediaQuery对应的Element的update方法。

经过一系列的跳转过后,最终会调用到下面的两个核心方法:

上面介绍的MediaQuery.of(context)方法最终会把入参Context放到_dependents变量里,而这里会遍历这个map,调用每一个ContextdidChangeDependecies方法,didChangeDependecies会将此Context置为dirty状态,下一帧来临时会被重新绘制,并调用此Contextbuild方法。

所以,破案了,当键盘弹起/隐藏时快递主页会被rebuild的原因找到了!

整体的rebuild调用流程如下,感兴趣的可以结合这个调用流程图去看源码:

避免rebuild的办法

研究过源码后,解决方案就变的很简单。

  • 自定义useInheritedMediaQuery属性为true,并在最外面包一层MediaQuery,让WidgetsApp创建时使用MediaQuery,而不去使用监听了application尺寸变化的_MediaQueryFromWindow控件。
  • 避免在页面中使用MediaQuery.of(context)方法,可以使用对应的替代方法,比如本例可以采用下面的代码进行替代,注意单位的转换。
  • 如果必须要使用MediaQuery.of(context)方法,可以使用Builder控件包裹下,of方法的入参传入此Buildercontext即可,这样被rebuild仅是Builder控件包裹下的widget子树。

总结

app界面逐渐复杂时,我们不得不考虑去优化界面性能。本文中介绍的例子在开发中是很常见的,如果不了解MediaQuery.of的机制,可能会引起大量使用此方法的界面发生重绘操作,造成页面卡顿、帧率下降。我们详细分析了背后的源码逻辑,介绍了解决办法,希望能给大家的调优工作提供些许帮助。

作者:京东物流 沈明亮

来源:京东云开发者社区文章来源地址https://www.toymoban.com/news/detail-463358.html

到了这里,关于Flutter调优--深入探究MediaQuery引起界面Rebuild的原因及解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 深入浅出:探究过完备字典矩阵

    在数学和信号处理的世界里,我们总是在寻找表达数据的最佳方式。在这篇博文中,我们将探讨一种特殊的矩阵——过完备字典矩阵,这是线性代数和信号处理中一个非常有趣且实用的概念。 首先,我们先来理解一下字典矩阵的概念。在数学上,字典矩阵基本上就是一组向量

    2024年03月17日
    浏览(34)
  • 深入探究kubernetes resources - Part 1

    在开始使用 Kubernetes 时,社区教给我们的第一件事就是始终为我们 pod 中的每个容器设置 CPU 和内存的请求和限制。 当您指定 Pod 时,您可以选择指定容器需要多少资源。 您指定的最常见资源是 CPU 和内存 (RAM); 如果容器指定了自己的资源限制但没有指定资源请求,那么 Kub

    2024年02月09日
    浏览(90)
  • 深入探究Selenium定位技巧及最佳实践

    在使用Selenium进行Web自动化测试时,准确地定位元素是非常重要的一步。Selenium提供了多种元素定位方法,本文将深入探究这八大元素定位方法,帮助读者更好地理解和应用Selenium的定位技巧。 1. ID定位 ID是元素在HTML中的唯一标识符,因此使用ID进行定位是最直接、最快速的方

    2024年01月21日
    浏览(41)
  • 深入探究语音识别技术:原理、应用与实现

    ❤️觉得内容不错的话,欢迎点赞收藏加关注😊😊😊,后续会继续输入更多优质内容❤️ 👉有问题欢迎大家加关注私戳或者评论(包括但不限于NLP算法相关,linux学习相关,读研读博相关......)👈 (封面图由文心一格生成) 随着人工智能的快速发展,语音识别技术得到了

    2024年02月03日
    浏览(32)
  • “深入探究SpringMVC的工作原理与入门实践“

    SpringMVC是一个流行的Java Web开发框架,它提供了一种优雅的方式来构建灵活、可扩展的Web应用程序。本文将介绍SpringMVC的基本概念,深入探讨其工作流程和核心组件,并提供一个入门程序来帮助读者快速上手。 SpringMVC是基于Java的MVC(Model-View-Controller)设计模式的Web框架。它通

    2024年02月10日
    浏览(41)
  • Java内存溢出问题深入探究及其解决策略

    Java内存溢出是一个常见且棘手的问题,可能会导致程序的性能急剧下降或者崩溃,给业务带来严重的影响。为了深入解析和理解此问题,本文将详细探究Java的内存模型,内存溢出的根本原因,诊断方法以及解决策略。 1.1 Java内存模型 Java内存空间主要包括以下几个部分:方法

    2024年02月09日
    浏览(49)
  • 深入探究node搭建socket服务器

    自从上篇中sokect实现了视频通话,但是是使用ws依赖库实现的服务端,所以最近再看ws源码,不看不知道,一看很惊讶。 接下来一点点记录一下,如何搭建一个简易的服务端socket,来实现上次的视频通讯。 首先看一下ws依赖的调用 所以首选我们要创建一个服务器,然后监听端

    2024年03月14日
    浏览(37)
  • 深入探究:使用大型AI模型的实战指南

    💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】 🤟 基于Web端打造的:👉轻量化工具创作平台 💅 想寻找共同学习交流的小伙伴,请点击【全栈技术交流群】 在今天的技术领域,大型AI模型已成为解决各种复杂问题的有力工具。本文将深入探讨如何实战运用这些

    2024年02月03日
    浏览(39)
  • 深入探究HTML表单与JavaScript的关系

    HTML表单是网页中数据收集的重要工具,而JavaScript则充当着这些数据的处理者和控制者的角色。二者之间的关系非常紧密,共同构成了现代Web应用中用户交互的基础。在这篇博客中,我们将详细地解析HTML表单与JavaScript如何交互,以及如何使用JavaScript来增强表单功能。 首先,

    2024年02月07日
    浏览(28)
  • “深入探究Spring Boot:从入门到精通“

    标题:深入探究Spring Boot:从入门到精通 摘要:本文将从入门到精通地介绍Spring Boot框架,包括基本概念、核心特性、常用功能和高级用法。通过阅读本文,读者将能够全面了解Spring Boot,并能够编写出高效、可靠的Spring Boot应用程序。 正文: Spring Boot是一个基于Spring框架的快

    2024年02月14日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包