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獲取數據的類型。說明如下：

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多個組件的詳細用法。