Flutter调优--深入探究MediaQuery引起界面Rebuild的原因及解决办法 | 京东云技术团队

前言

我们可以通过MediaQuery.of(context)方法获取到一些设备和系统的相关信息，比如状态栏的高度、当前是否是黑暗模式等等，使用起来相当方便，但是也要注意可能引起的页面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