flutter1.2,flutter122

Flutter 94: 初识 MediaQuery

      当我们同时为手机和平板适配编写 app 针对不同屏幕尺寸进行 UI 布局或当用户偏好设置较大字号或是想要最大限度等减少动画等；此时就需要 MediaQuery 来帮我们获取所用设备的信息以及用户设置的偏好信息；

       MediaQuery 一直存在于 WidgetsApp 和 MaterialApp 中， MediaQuery 继承自 InheritedWidget 是一个单独的 Widget ，但一般通过 MediaQuery.of(context) 来获取相关信息；

      当相关信息发生变化，例如屏幕旋转等时，屏幕中 Widget 会重新构建，以保持最新状态；我们可以通过 MediaQuery 构造函数和提供的静态方法手动设置对应的相关信息；

       MediaQueryData 包含关于媒介的相关信息；一般通过 MediaQuery.of(context) 获取；

       size 为媒介的尺寸大小，以逻辑像素为单位；

       devicePixelRatio 为像素密度；与设备物理像素有关，与横竖屏等无关；

       orientation 为横竖屏， Orientation.landscape 为横屏， Orientation.portrait 为竖屏；

       textScaleFactor 为

每个逻辑像素的字体像素数，小菜理解为字体的像素比；注意，小菜设置了默认字体像素密度为标准的 1.2 倍之后调整设备系统字号，其 1.2 倍依旧是以标准字号为基础扩大 1.2 倍；

       platformBrightness 为当前设备的亮度模式；注意调整屏幕亮度并不会改变该模式，与当前系统支持的黑暗模式和明亮模式相关；

       alwaysUse24HourFormat 为当前设备是否为 24 小时制；

       accessibleNavigation 为是否使用 TalkBack 或 VoiceOver 之类的辅助功能与应用程序进行交互，用以辅助视力障碍人群；

       invertColors 为是否使用颜色反转，主要用于 iOS 设备；

       highContrast 为用户是否要求前景与背景之间的对比度高，主要用于 iOS 设备；

       disableAnimations 为平台是否要求禁用或减少动画；

       boldText 为平台是否要求使用粗体；

       padding 为屏幕内边距，一般是刘海儿屏或异形屏中被系统遮挡部分边距；

       viewInsets 为键盘弹出时等遮挡屏幕边距，其中 viewInsets.bottom 为键盘高度；

       systemGestureInsets 为手势边距，如 Android Q 之后添加的向左滑动关闭页面等；

       viewPadding 小菜理解为视图内边距，为屏幕被刘海儿屏或异形屏中被系统遮挡部分，从 MediaQuery 边界的边缘计算；此值是保持不变；例如，屏幕底部的软件键盘可能会覆盖并占用需要底部填充的相同区域，因此不会影响此值；

       physicalDepth 为设备物理层级，小菜暂时还未想到对应的应用场景；

      小菜在尝试获取其他子 Widget Size 时，有两点需要注意，首先要设置一个全局的 GlobalKey 来获取当前位置， key 需要为唯一的；第二通过 GlobalKey().currentContext 获取 BuildContext 上下文环境，从而获取对应尺寸；

       MediaQuery 案例尝试

      小菜对于部分 MediaQueryData 的应用和理解还不够深入；如有错误请多多指导！

相关问答

Q1: Flutter设置APP版本与构建版本

  当一个纯Flutter APP开发完成，我们要打包发布到App Store和各大安卓市场，这时候我们需要设置APP的版本号。

  如果我们在使用原生iOS或者Android开发的时,我们会在info.plist中设置 version 和 build 或是在build.gradle中设置 versionName 和 versionCode ,他们分别表示APP的版本和构建版本。

  但是我们在使用Flutter管理APP版本时，打开 pubspec.yaml 只看到一个 version 字段。这时候我们应该怎么设置APP的 version 和 build 呢？

  我们在pub上随便找一个Flutter的组件，例如官方的 camera ,我们可以看到截止目前为止最新的版本为： camera: ^0.5.2+1 。看到这里，我想大家都明白了，Dart采用的是加号式的版本描述方式， + 前面是版本号， + 后面是当前版本的build号。所以我们设置APP的版本号和build次数，在这里设置即可，例如： version: 1.2.0+1 。

  当我们新建一个Flutter工程的时候，我们分别使用Xcode和Android Studio打开iOS和Android的工程可以看到，iOS中的 version 和 build 的值分别为 FLUTTER_BUILD_NAME 和 FLUTTER_BUILD_NUMBER ：

同样我们打开Android工程可以看到有如下定义：

  事实上，Flutter在编译的时候会生成 ios/Flutter/Generated.xcconfig 和 android/local.properties 文件。这两个文件由Flutter编译自动生成，不可更改。记录了包含SDK路径或者文件路径，版本信息，环境配置（release/debug）等信息。原生工程获取版本信息的变量就定义在这两个文件里面。

Q2: 为什么说移动端的未来是Flutter？

Flutter是Google开发的新一代跨平台方案，Flutter可以实现写一份代码同时运行在iOS和Android设备上，并且提供很好的性能体验。Flutter使用Dart作为开发语言，这是一门简洁、强类型的编程语言。Flutter对于iOS和Android设备，提供了两套视觉库，可以针对不同的平台有不同的展示效果。

Flutter原本是为了解决Web开发中的一些问题，而开发的一套精简版Web框架，拥有独立的渲染引擎和开发语言，但后来逐渐演变为移动端开发框架。正是由于Dart当初的定位是为了替代JS成为Web框架，所以Dart的语法更接近于JS语法。例如定义对象构建方法，以及实例化对象的方式等。

在Google刚推出Flutter时，其发展很缓慢，终于在18年发布第一个Bate版之后迎来了爆发性增长，发布第一个Release版时增长速度更快。可以从Github上Star数据看出来这个增长的过程。在19年最新的Flutter 1.2版本中，已经开放Web支持的Beta版。

Flutter不仅仅提供了一套视觉库，在Flutter整体框架中包含各个层级阶段的库。例如实现一个游戏功能，上面一些游戏控件可以用上层视觉库，底层游戏可以直接基于Flutter的底层库进行开发，而不需要调用原生应用的底层库。Flutter的底层库是基于Open GL实现的，所以Open GL可以做的Flutter都可以。

Q3: 看我如何使用Flutter开发一款盯盘小工具

前言

最近街边讨论买基金大佬们又多起来了，一些技术交流群也时不时看到某某某大佬在讨论股票，看来最近行情很好啊，虽然我不懂交易，但我总觉得可以做些什么来弥补我的不足，于是有了接下来要跟大家分享的“盯盘小工具”。

准备开干

那么接下来我的目标是开发一款PC端的桌面盯盘小工具，特点首先就是小、方便整天盯着电脑屏幕的白领们打开瞧瞧，省去费事各种操作；然后就是无需关注太多费脑筋的指标，所以能够显示名称和涨跌幅即可。有的上面的需求后，那就可以开始搬砖了，但是对于我这种只懂点Android皮毛又没做过桌面应用的人来说，简直是比登天还难，那该咋办？在夜深人静时，我恍然想起了Flutter，没错先来一张图：

还记得当时看Flutter的时候还是1.2版本，如今回过头来看，已经不是曾经那个Flutter了。

搬砖

为了实现这个小小的业余需求并且又能学习Flutter，于是我白天下班回来又开始不同场景不同程序语言的搬砖，重新安装了Flutter的最新开发环境，重新学习Flutter开发-万物皆widget。

功夫不负有心人

效果图展示

当前为最初版本，很多功能还不够完善，后续目标就是完善及优化，

GitHub项目地址：

致谢

为了实现这个小小的业余需求并且又能学习Flutter，我也参考了很多Flutter大佬的开源项目，在此感谢所有优秀的开源项目 _ 。