简介
移动的开发中,大家可能最头疼的就是不同设备的规格了,现在设备这么多,如何才能在诸多的设备中找到合适的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/
最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!
欢迎关注我的公众号:「程序那些事」,懂技术,更懂你!