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 | 被系统遮挡的部分,通常指“刘海屏”或者系统状态栏,此值独立于padding 和viewInsets ,它们的值从MediaQuery 控件边界的边缘开始测量。在移动设备上,通常是全屏。 |
systemGestureInsets | 显示屏边缘上系统“消耗”的区域输入事件,并阻止将这些事件传递给应用。比如在Android Q手势滑动用于页面导航(ios也一样),比如左滑退出当前页面。 |
physicalDepth | 设备的最大深度,类似于三维空间的Z轴。 |
alwaysUse24HourFormat | 是否是24小时制。 |
accessibleNavigation | 用户是否使用诸如TalkBack或VoiceOver之类的辅助功能与应用程序进行交互,用于帮助视力有障碍的人进行使用。 |
invertColors | 是否支持颜色反转。 |
highContrast | 用户是否要求前景与背景之间的对比度高, iOS上,方法是通过“设置”->“辅助功能”->“增加对比度”。 此标志仅在运行iOS 13的iOS设备上更新或以上。 |
disableAnimations | 平台是否要求尽可能禁用或减少动画。 |
boldText | 平台是否要求使用粗体。 |
orientation | 是横屏还是竖屏。 |
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('字体变大'), ), ); }
字体变大了一倍。
交流
如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
推荐一个Flutter学习地址:http://laomengit.com 里面包含150多个组件的详细用法。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
[ASP.NET Core 3.1]浏览器嗅探解决部分浏览器丢失Cookie问题
[ASP.NET Core 3.1]浏览器嗅探解决部分浏览器丢失Cookie问题看了前文的同学们应该都知道,搜狗、360等浏览器在单点登录中反复重定向,最终失败报错。 原因在于,非Chrome80+浏览器不识别Cookie上的SameSite=none属性值,导致认证Cookie在后续请求中被抛弃。 截至2020/3/30号,非Chrome浏览器测试包含两种结果: case1:可设置cookie的samesite=none, 浏览器可读取该cookiecase2:对cookie设置samesite=none, 浏览器不能读取该cokie浏览器 最新版本号 结果 备注IE 11 case1 win10Edge 44.18362.449.0 case1 2020/2/15开始使用chrome内核/70.0.3538.102Firefox 74 case1 360急速浏览器 12.0.1190.0 case1 基于chromium78搜狗浏览器 8.6.1.31812 case2 User-Agent: Chrome/65.0.3314.0猎豹安全浏览器 6.5.115 case2 User...
- 下一篇
Gradle 概述
Gradle 是一个开源的构建自动化(build automation)工具。有关构建自动化的定义请参考:https://en.wikipedia.org/wiki/Build_automation。同时 Gradle 被设计得足够灵活可以被用来构建几乎任何类型的软件。 下面的一些特性是从宏观上来对 Gradle 的一些特性进行阐述: 高性能 Gradle 通过运行需要运行的任务来避免不必要的工作。因为输入和输出可能会改变。你还可以通过启用构建缓存来让上一次构建运行的状态可以被重用,甚至你可以在不同的机器上这样做(通过共享构建缓存)。 同时 Gradle 还有很多优化的实践,Gradle 开发小组坚持开发使用来提高 Gradle 的性能。 基于 JVM Gradle 是运行在 JVM 虚拟机上的,所以你的机器必须要安装 JDK。针对使用 Java 平台的用户来说,这会带来非常大的好处,这些用户可以在他们的构建(build)逻辑中使用标准的 Java API。包括使用自定义任务类型和插件。同时也能够让 Gradle 更加容易的在其他平台上运行。 请注意,Gradle 并不仅仅限制于构建 ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS关闭SELinux安全模块
- CentOS8安装Docker,最新的服务器搭配容器使用
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS6,CentOS7官方镜像安装Oracle11G
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS6,7,8上安装Nginx,支持https2.0的开启