简介

挪动的开发中，大家可能最头疼的就是不同设施的规格了，当初设施这么多，如何能力在诸多的设施中找到适合的widget的地位来进行绘制呢？

不必怕，在flutter中为咱们提供了一个叫做MediaQuery的利器，大家一起来看看吧。

MediaQuery详解

MediaQuery从名字上来看，它的意思是媒体查问。它能够查问的货色就多了，能够查问以后你app的窗口信息，查问你指定的某个widget的信息等等，十分的弱小。

咱们先来看下MediaQuery到底是什么。 具体来说MediaQuery继承自InheritedWidget:

class MediaQuery extends InheritedWidget

那么什么是InheritedWidget呢？为什么MediaQuery须要继承InheritedWidget呢？

很多时候，咱们须要从widget的子widget中获取到父widget对象，InheritedWidget就是一个能够提供简略获取办法的对象。

在InheritedWidget中能够实现of办法，通过调用BuildContext.dependOnInheritedWidgetOfExactType来从context中获取最邻近的InheritedWidget对象。

这里，因为MediaQuery是一个媒体查问工具，所以咱们可能须要在很多中央随时随地的进行对象的获取，那么这里应用InheritedWidget就是再好不过了。

MediaQuery的属性

MediaQuery的自有属性只有两个，别离是MediaQueryData类型的data和Widget类型的child。

MediaQueryData是一个相似于构造体的类，用来存储各种Media的状态信息。

咱们先来看下MediaQueryData的构造函数：

const MediaQueryData({    this.size = Size.zero,    this.devicePixelRatio = 1.0,    this.textScaleFactor = 1.0,    this.platformBrightness = Brightness.light,    this.padding = EdgeInsets.zero,    this.viewInsets = EdgeInsets.zero,    this.systemGestureInsets = EdgeInsets.zero,    this.viewPadding = EdgeInsets.zero,    this.alwaysUse24HourFormat = false,    this.accessibleNavigation = false,    this.invertColors = false,    this.highContrast = false,    this.disableAnimations = false,    this.boldText = false,    this.navigationMode = NavigationMode.traditional,  })

能够看到，MediaQueryData中蕴含了很多有用的属性，咱们来具体看一下具体的内容。

首先是示意media logical pixels大小的size。大家要留神的是，这里的size示意的是逻辑pixels的大小。

有logical pixels，就有Physical pixels,前者示意的逻辑大小，在任何设施上都是一样的，而后者示意的是实在的物理设施所反对的像素大小。这两种是能够不同的。一个物理像素可能代表多个逻辑像素，这个对应关系就是由devicePixelRatio这个属性来决定的。

devicePixelRatio示意的是一个物理像素代表多少个逻辑像素。devicePixelRatio并不要求是整数，比方在Nexus 6中，这个devicePixelRatio=3.5。

接下来是textScaleFactor，示意一个逻辑像素可能示意多少个字体像素。或者你能够将其了解为字体的放大水平。

比方textScaleFactor=1.5，那么它的意思是出现进去的字体要比给定的字体大50%。

而后是platformBrightness，示意的是设施的亮堂水平。最常见的比如说亮堂模式或者光明模式等。

viewInsets指的是被零碎UI所齐全遮罩的局部，比如说咱们在进行键盘输入的时候，会弹起键盘界面。

padding示意的是被零碎UI所局部遮罩,并不能齐全看见的局部，通常是零碎状态栏，比方iphone中的刘海等。

viewPadding示意的是被零碎UI所局部遮罩,并不能齐全看见的局部，通常是零碎状态栏，比方iphone中的刘海等。

哇喔，看起来padding和viewPadding是一样的，那么事实是否如此呢？

这两者通常状况下是一样的，只有在呈现键盘输入界面的时候两者就会产生不同。

简略来说，viewPadding是固定的，它的大小不会随键盘的显示而发生变化，Padding是可变动的，当键盘弹起，零碎状态栏被遮罩的时候，它的bottom值就是0。

systemGestureInsets是一个非凡的手势区域，在这个区域外面只能辨认局部的手势指令，而不能辨认所有的手势指令，所以须要这样的一个属性。

alwaysUse24HourFormat示意是否应用24小时的工夫格局。

accessibleNavigation示意用户是否应用了一些accessibility服务来和利用进行交互。

还有其余的一些属性比方highContrast,disableAnimations,boldText,navigationMode和orientation等根底的属性能够应用。

MediaQuery的另外一个属性就是child了。

MediaQuery的构造函数

MediaQuery除了最惯例的构造函数之外，还有三个构造函数，别离是MediaQuery.removePadding,MediaQuery.removeViewInsets和MediaQuery.removeViewPadding。

这三个构造函数都是通过传入一个指定的context和child来结构MediaQuery，然而他们都相应的移出了一些属性。依据名字就可以看进去，这三个别离移出的是padding，viewInsets和viewPadding。

咱们以removePadding为例，看一下具体的实现流程：

  factory MediaQuery.removePadding({    Key? key,    required BuildContext context,    bool removeLeft = false,    bool removeTop = false,    bool removeRight = false,    bool removeBottom = false,    required Widget child,  }) {    return MediaQuery(      key: key,      data: MediaQuery.of(context).removePadding(        removeLeft: removeLeft,        removeTop: removeTop,        removeRight: removeRight,        removeBottom: removeBottom,      ),      child: child,    );  }

removePadding办法须要传入四个额定的参数来示意是否须要移出padding的left,top,right或者bottom。

咱们能够看到返回了一个新的MediaQuery，其中data局部应用了MediaQuery.of(context)来获取context最近的MediaQuery，而后调用它的removePadding办法将对应的padding属性删除。

MediaQuery的应用

讲完MediaQuery的构造函数，接下来咱们看一下MediaQuery罕用的应用场景。

其实MediaQuery最常见的用途就是来判断设施的大小，从而依据不同设施的大小来进行页面的调整。

比方上面的getSize办法：

enum ScreenSize { Small, Normal, Large, ExtraLarge }ScreenSize getSize(BuildContext context) {  double deviceWidth = MediaQuery.of(context).size.shortestSide;  if (deviceWidth > 900) return ScreenSize.ExtraLarge;  if (deviceWidth > 600) return ScreenSize.Large;  if (deviceWidth > 300) return ScreenSize.Normal;  return ScreenSize.Small;}

咱们通过MediaQuery.of(context)拿到MediaQuery，而后通过size的shortestSide属性取得设施的宽度，而后依据设施的宽度跟特定的宽度进行比照，从而判断设施屏幕的大小。

当然，MediaQuery还能够用在其余须要检测Media属性的中央，大家能够认真领会。

总结

MediaQuery是flutter中一个十分不便的工具，用来检测media的属性状况，依据MediaQuery，咱们能够做出更加富裕交互性的APP。

更多内容请参考 http://www.flydean.com/50-flutter-mediaquery/

最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！

欢送关注我的公众号:「程序那些事」,懂技术，更懂你！