Flutter 强大的MediaQuery控件

老孟Flutter

发布于 2020-09-11 16:24:05

7380

文章被收录于专栏：FlutterFlutter

老

孟

一枚

有态度

的程序员

注意：无特殊说明，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获取数据的类型。说明如下：

逻辑像素，并不是物理像素，类似于Android中的dp，逻辑像素会在不同大小的手机上显示的大小基本一样，物理像素 = size*devicePixelRatio。

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('字体变大'),
      ),
    );
  }

字体变大了一倍。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-03-30，如有侵权请联系 cloudcommunity@tencent.com 删除

flutter