Flutter 樣式基礎之 MediaQuery

介紹

MediaQuery 用於查詢解析給定數據的媒體信息（例如，window寬高/橫豎屏/像素密度比 等信息）官方提供這個組件讓開發者能夠獲取想要的數據。它主要用於不一樣尺寸大小設備的適配。

官網介紹視頻：www.youtube.com/watch?v=A3W…

繼承關係

Object -> Diagnosticable -> DiagnosticableTree -> Widget -> ProxyWidget -> InheritedWidget -> MediaQuery

構造函數

MediaQuery({Key key, @required MediaQueryData data, @required Widget child })
複製代碼

除上以外，MediaQuery 還有三個工廠構造函數，分別是：

1. MediaQuery.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,
    );
  }
複製代碼

2. MediaQuery.removeViewInsets

factory MediaQuery.removeViewInsets({
    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).removeViewInsets(
        removeLeft: removeLeft,
        removeTop: removeTop,
        removeRight: removeRight,
        removeBottom: removeBottom,
      ),
      child: child,
    );
  }
複製代碼

3. MediaQuery.removeViewPadding Google API 文檔還有該方法，可是源碼已找不到了，估計是代碼已被刪除但文檔還沒有更新。

從上述幾個工廠構造函數的源碼咱們不難看出，實際上工廠函數其實也是經過MediaQuery.of(context)方法獲取MediaQueryData 對象，而後操做MediaQueryData 對象的對應方法，去設置相關屬性值，至於這兩個工廠構造函數的具體做用，你們有興趣的同窗能夠查閱MediaQueryData的相應源代碼，或者看這篇文章：《Flutter 基礎之 MediaQueryData》

經常使用方法

• debugFillProperties(DiagnosticPropertiesBuilder properties) → void 添加與節點關聯的其餘屬性。
• updateShouldNotify(covariant MediaQuery oldWidget) → bool 系統是否應通知今後Widget基礎的Widgets.
• of(context) → MediaQueryData， 是一個靜態方法,返回context所在範圍的MediaQueryData對象。
• boldTextOverride(BuildContext context) → bool 返回最近的context 中MediaQuery 對boldText的輔助功能設置，若是不存在，則返回false。
• platformBrightnessOf(BuildContext context) → Brightness 返回最近的MediaQuery 的platformBrightness 對象，若不存在，則返回 Brightness.light。

經常使用屬性

data → MediaQueryData

點我查看MediaQueryData 詳細介紹

示例：

var deviceData = MediaQuery.of(context); // 返回 MediaQueryData
var width = deviceData.size.width; //返回context所在的窗口寬度
var height = deviceData.size.height;//返回context所在的窗口高度
複製代碼

注意事項

使用MediaQuery必需要MaterialApp 或者WidgetsApp 去包裹咱們的Widget，這樣纔可以提供正常使用它，不然會出現錯誤:

Flutter Error: MediaQuery.of() called with a context that does not contain a MediaQuery。
複製代碼

另外，在當前小部件中使用了上一個小部件的 context，來調用 MediaQuery.of(context) 獲取數據的時候，也會出現上述錯誤。

使用示例

使用MediaQuery.of方法，能夠獲取給定BuildContext的當前MediaQueryData。例如，要獲取當前window的大小，可使用MediaQuery.of(context).size。

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MediaQueryDemo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Container(
      child: ...,
    );
  }
}
複製代碼

總結

經過這篇文章的學習，咱們熟悉了MediaQuery的概念及所提供的功能，經過它咱們能夠拿到widget窗口的寬高、橫豎屏等信息。除了MediaQuery之外，實際上咱們也能夠經過GlobalKey來獲取該widget的size。你們有興趣也能夠去了解經過GlobalKey的獲取寬高的方式。

做者

xiaosongzeem