flutter系列之:查询设备信息的利器:MediaQuery

简介

移动的开发中,大家可能最头疼的就是不同设备的规格了,现在设备这么多,如何才能在诸多的设备中找到合适的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/

最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!

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

发表评论

相关文章