Flutter MediaQuery探究

Flutter MediaQuery探究

MediaQuery作用是什么呢，我们先来看看源码文档注释

/// Establishes a subtree in which media queries resolve to the given data.
///
/// For example, to learn the size of the current media (e.g., the window
/// containing your app), you can read the [MediaQueryData.size] property from
/// the [MediaQueryData] returned by [MediaQuery.of]:
/// `MediaQuery.of(context).size`.
///
/// Querying the current media using [MediaQuery.of] will cause your widget to
/// rebuild automatically whenever the [MediaQueryData] changes (e.g., if the
/// user rotates their device).
///
/// If no [MediaQuery] is in scope then the [MediaQuery.of] method will throw an
/// exception, unless the `nullOk` argument is set to true, in which case it
/// returns null.

大致意思子树上的节点能访问到它的data数据信息，data信息包含很多，比如获取当前app窗口window的大小，你可以通过读取MediaQueryData.size属性，MediaQueryData结构通过MediaQuery.of(context)获取，获取当前media通过MediaQuery.of方法获取会导致MediaQueryData的数据变化时（比如：屏幕旋转，键盘的显示与隐藏），你的widget会自动重建，如果当前访问访问不到MediaQuery，即当前widget的祖先节点没有MediaQuery widget，该方法会抛异常，除非你传了nullOk参数为true

先看下MediaQuery的定义

class MediaQuery extends InheritedWidget {
  /// Creates a widget that provides [MediaQueryData] to its descendants.
  ///
  /// The [data] and [child] arguments must not be null.
  const MediaQuery({
    Key key,
    @required this.data,
    @required Widget child,
  }) : assert(child != null),
       assert(data != null),
       super(key: key, child: child);
  
  /// Contains information about the current media.
  ///
  /// For example, the [MediaQueryData.size] property contains the width and
  /// height of the current window.
  final MediaQueryData data;

从定义我们可以看出它派生自InheritedWidget, 而InheritedWidget能有效地将数据在当前Widget树中向它的子widget树传递,子widget能沿着element树找到最近的祖先widget，从而获取其相关数据，子widget访问其数据时会在InheritedWidget中添加依赖，InheritedWidget的数据变化时会通知依赖的子widget，我们来看看如果访问MediaQuery的共享数据MediaQueryData。

/// The data from the closest instance of this class that encloses the given
  /// context.
  ///
  /// You can use this function to query the size an orientation of the screen.
  /// When that information changes, your widget will be scheduled to be
  /// rebuilt, keeping your widget up-to-date.
  ///
  /// Typical usage is as follows:
  ///
  /// ```dart
  /// MediaQueryData media = MediaQuery.of(context);
  /// ```
  ///
  /// If there is no [MediaQuery] in scope, then this will throw an exception.
  /// To return null if there is no [MediaQuery], then pass `nullOk: true`.
  ///
  /// If you use this from a widget (e.g. in its build function), consider
  /// calling [debugCheckHasMediaQuery].
  static MediaQueryData of(BuildContext context, { bool nullOk = false }) {
    assert(context != null);
    assert(nullOk != null);
    final MediaQuery query = context.dependOnInheritedWidgetOfExactType<MediaQuery>();
    if (query != null)
      return query.data;
    if (nullOk)
      return null;
    throw FlutterError.fromParts(<DiagnosticsNode>[
      ErrorSummary('MediaQuery.of() called with a context that does not contain a MediaQuery.'),
      ErrorDescription(
        'No MediaQuery ancestor could be found starting from the context that was passed '
        'to MediaQuery.of(). This can happen because you do not have a WidgetsApp or '
        'MaterialApp widget (those widgets introduce a MediaQuery), or it can happen '
        'if the context you use comes from a widget above those widgets.'
      ),
      context.describeElement('The context used was')
    ]);
  }

从源码中我们看到是通过context.dependOnInheritedWidgetOfExactType()获取的， 继续跟进到framework

  @override
  T dependOnInheritedWidgetOfExactType<T extends InheritedWidget>({Object aspect}) {
    assert(_debugCheckStateIsActiveForAncestorLookup());
    final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[T];
    if (ancestor != null) {
      assert(ancestor is InheritedElement);
      return dependOnInheritedElement(ancestor, aspect: aspect) as T;
    }
    _hadUnsatisfiedDependencies = true;
    return null;
  }

_inheritedWidgets为所有子widget祖先链中的InheritedWidget节点，目的是为了能快速访问到节点，源码中最后又调用到dependOnInheritedElement方法，继续跟进

  @override
  InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object aspect }) {
    assert(ancestor != null);
    _dependencies ??= HashSet<InheritedElement>();
    _dependencies.add(ancestor);
    ancestor.updateDependencies(this, aspect);
    return ancestor.widget;
  }

到这里我们终于找到了正主，访问时会将其添加到_dependencies中并返回InheritedWidget节点，这样就可以访问到其共享数据了，至于共享数据变化时怎么自动重建子widget，大家可以看下InheritedElement，Element是用来管理树中节点的更新，删除的

获取window的size很简单，但我们平常开发中常用到的属性还有 padding viewPadding 和 viewInsets属性，这几个属性比较迷惑人，如果你要处理键盘遮挡问题，这时你需要viewInsets属性获取键盘的高度，看看它的定义

  /// The parts of the display that are completely obscured by system UI,
  /// typically by the device's keyboard.
  ///
  /// When a mobile device's keyboard is visible `viewInsets.bottom`
  /// corresponds to the top of the keyboard.
  ///
  /// This value is independent of the [padding] and [viewPadding]. viewPadding
  /// is measured from the edges of the [MediaQuery] widget's bounds. Padding is
  /// calculated based on the viewPadding and viewInsets. The bounds of the top
  /// level MediaQuery created by [WidgetsApp] are the same as the window
  /// (often the mobile device screen) that contains the app.
  ///
  /// See also:
  ///
  ///  * [ui.window], which provides some additional detail about this property
  ///    and how it relates to [padding] and [viewPadding].
  final EdgeInsets viewInsets;

viewInsets.bottom就可以获取到键盘的顶部，我们可以设置Padding的bottom为viewInsets.bottom从而使得可视区域为键盘遮挡后的剩余区域从而解决键盘遮挡了。
我们再来看看padding定义

  /// The parts of the display that are partially obscured by system UI,
  /// typically by the hardware display "notches" or the system status bar.
  ///
  /// If you consumed this padding (e.g. by building a widget that envelops or
  /// accounts for this padding in its layout in such a way that children are
  /// no longer exposed to this padding), you should remove this padding
  /// for subsequent descendants in the widget tree by inserting a new
  /// [MediaQuery] widget using the [MediaQuery.removePadding] factory.
  ///
  /// Padding is derived from the values of [viewInsets] and [viewPadding].
  ///
  /// See also:
  ///
  ///  * [ui.window], which provides some additional detail about this
  ///    property and how it relates to [viewInsets] and [viewPadding].
  ///  * [SafeArea], a widget that consumes this padding with a [Padding] widget
  ///    and automatically removes it from the [MediaQuery] for its child.
  final EdgeInsets padding;

意思就是被系统遮挡的部分，如iPhone X的挖孔和状态栏部分不可见区域的高度，其它的解释有点模糊，我实际使用了得出我的结论，以iPhone X为例，键盘不显示时它的padding.top为44，padding.bottom为34，如果键盘显示时padding.top为44，padding.bottom为0
而viewPadding 不管键盘显示或隐藏，viewPadding.top = 44和viewPadding.bottom = 34 都不变

知道这个我们来看看开发中常用的SafeArea

 Widget build(BuildContext context) {
    return Material(
      child: SafeArea(
        child: Center(
          child: Container(
            color: Colors.red,
            child: TextField(
              controller: _controller,
            ),
          ),
        )
      ),
    );
  }

点击输入框键盘显示时会发现输入框下移了，先说下怎么解决，其实只要设置SafeArea的属性maintainBottomViewPadding为true就可以了，我们看看其源码

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMediaQuery(context));
    final MediaQueryData data = MediaQuery.of(context);
    EdgeInsets padding = data.padding;
    // Bottom padding has been consumed - i.e. by the keyboard
    if (data.padding.bottom == 0.0 && data.viewInsets.bottom != 0.0 && maintainBottomViewPadding)
      padding = padding.copyWith(bottom: data.viewPadding.bottom);

    return Padding(
      padding: EdgeInsets.only(
        left: math.max(left ? padding.left : 0.0, minimum.left),
        top: math.max(top ? padding.top : 0.0, minimum.top),
        right: math.max(right ? padding.right : 0.0, minimum.right),
        bottom: math.max(bottom ? padding.bottom : 0.0, minimum.bottom),
      ),
      child: MediaQuery.removePadding(
        context: context,
        removeLeft: left,
        removeTop: top,
        removeRight: right,
        removeBottom: bottom,
        child: child,
      ),
    );
  }

关键的是设置bottom这句
if (data.padding.bottom == 0.0 && data.viewInsets.bottom != 0.0 && maintainBottomViewPadding)
padding = padding.copyWith(bottom: data.viewPadding.bottom);
意思键盘弹出时使用viewPadding.bottom，而键盘弹出时viewPadding.bottom == 没弹键盘时的padding.bottom,从而达到TextField位置不变