专栏首页FlutterFlutter 强大的MediaQuery控件
原创

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获取数据的类型。说明如下:

属性

说明

size

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

devicePixelRatio

单位逻辑像素的物理像素数量,即设备像素比。

textScaleFactor

单位逻辑像素字体像素数,如果设置为1.5则比指定的字体大50%。

platformBrightness

当前设备的亮度模式,比如在Android Pie手机上进入省电模式,所有的App将会使用深色(dark)模式绘制。

viewInsets

被系统遮挡的部分,通常指键盘,弹出键盘,viewInsets.bottom表示键盘的高度。

padding

被系统遮挡的部分,通常指“刘海屏”或者系统状态栏。

viewPadding

被系统遮挡的部分,通常指“刘海屏”或者系统状态栏,此值独立于paddingviewInsets,它们的值从MediaQuery控件边界的边缘开始测量。在移动设备上,通常是全屏。

systemGestureInsets

显示屏边缘上系统“消耗”的区域输入事件,并阻止将这些事件传递给应用。比如在Android Q手势滑动用于页面导航(ios也一样),比如左滑退出当前页面。

physicalDepth

设备的最大深度,类似于三维空间的Z轴。

alwaysUse24HourFormat

是否是24小时制。

accessibleNavigation

用户是否使用诸如TalkBack或VoiceOver之类的辅助功能与应用程序进行交互,用于帮助视力有障碍的人进行使用。

invertColors

是否支持颜色反转。

highContrast

用户是否要求前景与背景之间的对比度高, iOS上,方法是通过“设置”->“辅助功能”->“增加对比度”。 此标志仅在运行iOS 13的iOS设备上更新或以上。

disableAnimations

平台是否要求尽可能禁用或减少动画。

boldText

平台是否要求使用粗体。

orientation

是横屏还是竖屏。

paddingviewPaddingviewInsets的区别如下:

<img src="http://img.laomengit.com/mediaquery_2.png" alt="mediaquery_2" style="zoom:50%;" />

使用场景

根据尺寸构建不同的布局

SafeArea控件就是通过MediaQuery.of来实现的,平板和手机的(或者横屏和竖屏)布局可能是不一样的,比如如下布局:

<img src="http://img.laomengit.com/mediaquery_1.png" alt="mediaquery_1" style="zoom:50%;" />

布局代码如下:

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的相关内容。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter 强大的MediaQuery控件

    通常情况下,不会直接将MediaQuery当作一个控件,而是使用MediaQuery.of获取当前设备的信息,用法如下:

    老孟程序员
  • 还记得面试时被算法支配的恐惧吗?

    大多数程序员心里会想"总结的真精辟",当面试到算法时,各种“跪”、“再跪”、“还是跪”......,多少人因为算法而拿不到心仪的offer,算法毁一生啊。

    老孟程序员
  • Flutter Widgets 之 RichText

    应用程序离不开文字的展示,因此文字的排版非常重要,通常情况下Text组件可以完成绝大多数需求,它可以显示不同大小的文字、字体、颜色等,如果想在一句话或者一段文字...

    老孟程序员
  • Flutter 强大的MediaQuery控件

    通常情况下,不会直接将MediaQuery当作一个控件,而是使用MediaQuery.of获取当前设备的信息,用法如下:

    老孟程序员
  • Confluence 6 手动备份 原

    Confluence 的 Attachment Storage Configuration 可以配置 Confluence 将附件存储在  home direc...

    HoneyMoose
  • 当我们在讨论APS时,我们在讨论什么?

    高级计划与排程(Advanced Planning and Scheduling,简称“ APS” ),是解决生产排程和生产调度问题,常被称为排序问题或资源分配...

    李英杰同学
  • linux进程常用命令

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/d...

    bear_fish
  • 听著名设计学者——清华美院柳冠中教授讲设计

    “体验设计”的热潮又一次从西方波及了中国的设计界,但这一次最敏感的恰恰是“媒体”!每当一个新概念在国内传播时,国内商业界、媒体界乃至学术界都兴奋无比,又一轮获取...

    博文视点Broadview
  • 业界 | 详解Horovod:Uber开源的TensorFlow分布式深度学习框架

    选自Uber 作者:Alex Sergeev、Mike Del Balso 机器之心编译 参与:李泽南、路雪 Horovod 是 Uber 开源的又一个深度学...

    机器之心
  • 深入浅出—一文看懂支持向量机(SVM)

    如果你是一名模式识别专业的研究生,又或者你是机器学习爱好者,SVM是一个你避不开的问题。如果你只是有一堆数据需要SVM帮你处理一下,那么无论是Matl...

    黄博的机器学习圈子

扫码关注云+社区

领取腾讯云代金券