Flutter MediaQuery详解

MediaQuery的属性

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

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

const MediaQueryData(
{
    this.size = Size.zero,//这里的size表示的是逻辑pixels的大小
    this.devicePixelRatio = 1.0, //表示的是一个物理像素代表多少个逻辑像素。devicePixelRatio并不要求是整数，比如在Nexus 6中，这个devicePixelRatio=3.5.
    this.textScaleFactor = 1.0,//表示一个逻辑像素能够表示多少个字体像素。或者你可以将其理解为字体的放大程度。比如textScaleFactor=1.5，那么它的意思是呈现出来的字体要比给定的字体大50%
    this.platformBrightness = Brightness.light, //表示的是设备的明亮程度。最常见的比如说明亮模式或者黑暗模式等
  
    this.viewInsets = EdgeInsets.zero, //指的是被系统UI所完全遮罩的部分，比如说我们在进行键盘输入的时候，会弹起键盘界面。
    this.padding = EdgeInsets.zero, //表示的是被系统UI所部分遮罩,并不能完全看见的部分，通常是系统状态栏，比如iphone中的刘海等。
    this.viewPadding = EdgeInsets.zero,//表示的是被系统UI所部分遮罩,并不能完全看见的部分，通常是系统状态栏，比如iphone中的刘海等。
    //这两者通常情况下是一样的，只有在出现键盘输入界面的时候两者就会发生不同。
    //简单来说，viewPadding是固定的，它的大小不会随键盘的显示而发生变化，Padding是可变化的，当键盘弹起，系统状态栏被遮罩的时候，它的bottom值就是0
    
    
  
    this.systemGestureInsets = EdgeInsets.zero, //是一个特殊的手势区域，在这个区域里面只能识别部分的手势指令，而不能识别所有的手势指令，所以需要这样的一个属性。
    
    this.alwaysUse24HourFormat = false, //表示是否使用24小时的时间格式
    this.accessibleNavigation = false, //表示用户是否使用了一些accessibility服务来和应用进行交互
    this.invertColors = false, 
    this.highContrast = false, 
    this.disableAnimations = false, 
    this.boldText = false, 
    this.navigationMode = NavigationMode.traditional,
})

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属性获得设备的宽度，然后根据设备的宽度跟特定的宽度进行对比，从而判断设备屏幕的大小。