Flutter 樣式基礎之 MediaQuery

YYDev發表於2019-09-08
Flutter

介紹

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的獲取寬高的方式。

作者

Flutter 樣式基礎之 MediaQuery
xiaosongzeem

相關文章