米鼠商城

多快好省,买软件就上米鼠网

最新项目

人才服务

靠谱的IT人才垂直招聘平台

Flutter 强大的MediaQuery控件

  • lkj155
  • 2
  • 2020-03-30 21:03

3 月,跳不动了?>>>

注意:无特殊说明,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交流群(微信:laomengit)。

同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。

推荐一个Flutter学习地址:http://laomengit.com 里面包含150多个组件的详细用法。



城市合伙人全球招募中:400-150-9800

参与线下宏伟蓝图,用业绩说话!
软件线索、软件需求,米鼠网帮你变现!
更灵活的合作模式(不限地域、不限金额、不限项目)
更高额的提成比例(提成是软件项目利润的80%)
利润的核算方式:
以平台公开招标的最低价中标价格为基准,剩下的为利润部分,如对平台的最低中标价格有异议,可以推荐供应商进行竞标。
义务:
1、作为城市合伙人,在该城市利用自身优势推广“米鼠网平台”,拓展甲 方所拥有的“米鼠网平台”实名认证用户和 VIP 用户
2、作为城市合伙人,在该城市利用自身优势推广“米鼠网商城”,并寻求该地域软件产品销售商,促成软件产品销售商委托甲方在“米鼠网商城”上代理销售软件产品销售商的软件产品的交易,并拓展软件产品采购用户促成与甲方的采购交易。

猜你喜欢

评论留言