![](https://img-blog.csdnimg.cn/20200330202935979.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

> 注意：無特殊說明，Flutter版本及Dart版本如下：
> - Flutter版本： 1.12.13+hotfix.5 
> - Dart版本： 2.7.0

## MediaQuery

通常情況下，不會直接將MediaQuery當作一個控制元件，而是使用`MediaQuery.of`獲取當前裝置的資訊，用法如下：

```dart
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`來實現的，平板和手機的（或者橫屏和豎屏）佈局可能是不一樣的，比如如下佈局：

佈局程式碼如下：

```dart
var screenSize = MediaQuery.of(context).size;
if(screenSize.width>oneColumnLayout){
  //平板佈局
}else{
  //手機佈局
}
```

`oneColumnLayout`表示一列布局的寬度。

### 系統字型變化

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

```dart
@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](http://laomengit.com) 裡面包含150多個元件的詳細用法。

Flutter 強大的MediaQuery控制元件

相關文章