Flutter 強大的MediaQuery控件

注意：無特殊說明，Flutter版本及Dart版本如下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

MediaQuery

通常情況下，不會直接将MediaQuery當作一個控件，而是使用

MediaQuery.of

擷取目前裝置的資訊，用法如下：

var data = MediaQuery.of(context);           

此方式必須放在MediaQuery作用域内，否則會抛出異常，MaterialApp和WidgetsApp都引入了MediaQuery，并且随着螢幕的變化而導緻重建，比如旋轉螢幕、彈出輸入框等。

MediaQueryData

MediaQueryData是

MediaQuery.of

擷取資料的類型。說明如下：

屬性	說明
size	邏輯像素，并不是實體像素，類似于Android中的dp，邏輯像素會在不同大小的手機上顯示的大小基本一樣，實體像素 = size*devicePixelRatio。
devicePixelRatio	機關邏輯像素的實體像素數量，即裝置像素比。
textScaleFactor	機關邏輯像素字型像素數，如果設定為1.5則比指定的字型大50%。
platformBrightness	目前裝置的亮度模式，比如在Android Pie手機上進入省電模式，所有的App将會使用深色（dark）模式繪制。
viewInsets	被系統遮擋的部分，通常指鍵盤，彈出鍵盤， viewInsets.bottom 表示鍵盤的高度。
padding	被系統遮擋的部分，通常指“劉海屏”或者系統狀态欄。
viewPadding	被系統遮擋的部分，通常指“劉海屏”或者系統狀态欄，此值獨立于 padding 和 viewInsets ，它們的值從 MediaQuery 控件邊界的邊緣開始測量。在移動裝置上，通常是全屏。
systemGestureInsets	顯示屏邊緣上系統“消耗”的區域輸入事件，并阻止将這些事件傳遞給應用。比如在Android Q手勢滑動用于頁面導航（ios也一樣），比如左滑退出目前頁面。
physicalDepth	裝置的最大深度，類似于三維空間的Z軸。
alwaysUse24HourFormat	是否是24小時制。
accessibleNavigation	使用者是否使用諸如TalkBack或VoiceOver之類的輔助功能與應用程式進行互動，用于幫助視力有障礙的人進行使用。
invertColors	是否支援顔色反轉。
highContrast	使用者是否要求前景與背景之間的對比度高， iOS上，方法是通過“設定”->“輔助功能”->“增加對比度”。 此标志僅在運作iOS 13的iOS裝置上更新或以上。
disableAnimations	平台是否要求盡可能禁用或減少動畫。
boldText	平台是否要求使用粗體。
orientation	是橫屏還是豎屏。

padding

、

viewPadding

viewInsets

的差別如下：

使用場景

根據尺寸建構不同的布局

SafeArea控件就是通過

MediaQuery.of

來實作的，平闆和手機的（或者橫屏和豎屏）布局可能是不一樣的，比如如下布局：

布局代碼如下：

var screenSize = MediaQuery.of(context).size;
if(screenSize.width>oneColumnLayout){
  //平闆布局
}else{
  //手機布局
}           

oneColumnLayout

表示一列布局的寬度。

系統字型變化

很多App都有一個功能就是調節字型大小，通過MediaQuery來實作，實作如下：

@override
  Widget build(BuildContext context) {
    var _data = MediaQuery.of(context).copyWith(textScaleFactor: 2.0);
    return Scaffold(
      appBar: AppBar(
        title: Text('老孟'),
      ),
      body: MediaQuery(
        data: _data,
        child: Text('字型變大'),
      ),
    );
  }           

字型變大了一倍。

交流

如果你對Flutter還有疑問或者技術方面的疑惑，歡迎加入Flutter交流群（微信：laomengit）。

同時也歡迎關注我的Flutter公衆号【老孟程式員】，公衆号首發Flutter的相關内容。

推薦一個Flutter學習位址：

http://laomengit.com

裡面包含150多個元件的詳細用法。