本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的用法,参数以及扩展.
适宜人群: 入门

引语

MediaQuery 想必大家或多或少都接触过, 我们想要知道屏幕尺寸、状态栏高度、底部间距、屏幕分辨率等等信息都需要借助 MediaQuery 这个媒介. 之所以 MediaQuery 可以这么方便的提供信息, 一切都是因为它是一个 InheritedWidget . InheritedWidget 是什么? 它可以有效的在树上传递信息. 往往都是子节点向上查找时, 去获得信息. MediaQuery 正是这样的一个信息处理体, 接下来我们就来分析一下它.

MediaQuery

在 MediaQuery 中, 提供着这样三个命名构造方法:

removePadding 删除边距
removeViewInsets 删除视图重叠部分边距
removeViewPadding 删除视图的边距

从这三个命名方法, 我们也可以大致了解到其中改变比较多的无非是三个属性: padding、viewPadding、viewInsets. 我们通过一张图来了解下三个属性分别是什么样子的:

ViewPadding & Padding 实际上都是其中部分 ui 被遮挡的部分, 一般来说就是之前比较流行的刘海屏之类的屏幕或者系统的状态栏, 这部分属于屏幕被遮挡的部分. ViewPaading 和 Padding 唯一不同的地方在于 ViewPadding 的值不会受前面 ui 的影响, 而 Padding 是受前面 ui 的影响. 这是什么意思呢?

如下图, 在不显示键盘的时候, ViewPadding 和 Padding 的值是相同的. 这时, 这二者的值仅受屏幕状态栏和屏幕本身的影响. 也就说二者没有被完全遮挡. 但是我们在上图中, 由于键盘的覆盖, 我们可以看到底部实际上被键盘给覆盖住了. 不过 ViewPadding 是不受完全覆盖影响的, 而 Padding 是受完全覆盖影响的. 所以 Padding 的取值为 Size.zero, 而 ViewPadding 仍然取的之前覆盖的值. 在下图中 ViewInsets 的值是 zero, 而上图中的值是键盘的高度, 可想而知, 只有当界面完全被遮挡时, 才会有它的取值.

对了, 大家实际测试的时候, 可能会发现取的值和教程有差异. 这是为什么呢? 有一点我们要注意, 刚刚也说了. 一定要是完全覆盖住界面才会有 ViewInsets, 我们默认唤起键盘的时候是会顶起界面的, 因此是取不到覆盖的值的. 这时, 我们想到在 Scaffold 中有个 resizeToAvoidBottomInset 属性, 这个属性置为 false 后. 键盘就会挡住相应的 ui . 自然也就会有 ViewInsets 值了.