Flutter 94: 初识 MediaQuery

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

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

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

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

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

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

       orientation 为横竖屏， Orientationlandscape 为横屏， Orientationportrait 为竖屏；

       textScaleFactor 为

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

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

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

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

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

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

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

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

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

       viewInsets 为键盘d出时等遮挡屏幕边距，其中 viewInsetsbottom 为键盘高度；

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

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

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

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

       MediaQuery 案例尝试

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

Image是一个用于展示的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

Imageasset - 用于从资源目录的显示,需要在 pubspecyaml 文件中声明。

Imagenetwork - 用于从网络上显示。

Imagefile - 用于从文件里显示。

Imagememory - 用于从内存里（Uint8List）显示。

alignment → AlignmentGeometry - 图像边界内对齐图像。

centerSlice → Rect - 九片图像的中心切片。

color → Color - 该颜色与每个图像像素混合colorBlendMode。

colorBlendMode → BlendMode - 用于 color 与此图像结合使用。

fit → BoxFit - 图像在布局中分配的空间。

gaplessPlayback → bool - 当图像提供者发生变化时，是继续显示旧图像（true）还是暂时不显示（false）。

image → ImageProvider - 要显示的图像。

matchTextDirection → bool - 是否在图像的方向上绘制图像 TextDirection。

repeat → ImageRepeat - 未充分容器时，是否重复。

height → double - 图像的高度。

width → double - 图像的宽度。

加载资源需要将资源放入工程中，例如：新建images文件夹，将放在该文件夹下，适配则是使用ios的方式1X，2X，3X：

然后在pubspecyaml中配置assets：

加载资源/网络/本地文件/内存：

占位图加载：

圆形：1裁剪实现 2CircleAvatar实现 3Container边框实现

圆角：1裁剪实现 2Container边框实现

BoxFitcontain 全图居中显示但不充满，显示原比例

BoxFitcover 可能拉伸，也可能裁剪，但是充满容器

BoxFitfill 全图显示且填充满，可能会拉伸

BoxFitfitHeight 可能拉伸，可能裁剪，高度充满

BoxFitfitWidth 可能拉伸，可能裁剪，宽度充满

BoxFitscaleDown 效果和contain差不多， 但是只能缩小，不能放大

下一节学习基础组件之Text

可以使用 SingleChildScrollView 包裹布局

这里还需要了解一个 Scaffold 中的一个属性 resizeToAvoidBottomInset

官方文档给出的解释就是处理键盘遮挡问题，默认是 true，如果不希望顶起需要设置为 false。

在 sdk 低版本的时候是使用 resizeToAvoidBottomPadding 需要将其设置为 false，现在已经弃用。但网上很多文章还没有改正，仍然用的 resizeToAvoidBottomPadding。

分两种情况

一种是使用系统的返回键，比如 android 底部导航自带的返回，

另一种是使用导航栏自定义的返回键

第一种情况需要在页面根布局使用 WillPopScope 在 onWillPop 中拦截返回处理。

原理都是通过判断输入框是否获取了焦点

当底部有固定的组件，比如提交按钮，我们在键盘d起的时候希望按钮贴着键盘顶部固定，但是中间滚动视图可以自由滚动

可以在 SingleChildScrollView 外部再使用 Stack 包裹，悬浮按钮使用 Positioned 定位，

还要⚠️注意要给滚动组件底部留出距离防遮挡，同时还有动态加上 bottomBar 的高度，因为在 iphoneX 以上的手机，会有个虚拟按键，如果不加上该按键高度，同样会被遮挡

高度获取方法： MediaQueryof(context)paddingbottom

在 showDialog 布局中使用 Scaffold 包裹，不要忘了将 backgroundColor 设为透明。

如果d窗过高，还是需要将高度固定，然后使用 SingleChildScrollView ，d窗中同样也可以在执行关闭的时候拦截，判断键盘是否d起，如果d起则要先关闭键盘。

给所有输入框绑定 FoucusNode

在 maxLines=1 的情况下，输入框不支持换行，换行按钮会变成 done

监听 onEditingComplete 方法

根布局使用 GestureDetector 或者 InkWell 包裹，点击的时候收起键盘。

最后要记得销毁

Container是Flutter里很常用的一个组件，类似于html中的div。

如图所示，和div一样，container也可以设置宽度（width）、高度（heigth）、内边距（padding）、外边距（margin）、边框（border）。

常用属性讲解

width：容器的宽度

heigth：容器的高度

color：容器的背景色

效果如图

padding：内边距

margin：外边距

  Expanded 使用与类似与Column，Row，Flex等展示多个组件集合的组件，Expanded包含的组件可以占据剩余的空间。

 屏幕左边是文字,最右边是一个按钮，文字数据是服务器数据返回的，且多行显示。

举例：1:2:1

以上就是关于Flutter 94: 初识 MediaQuery全部的内容，包括:Flutter 94: 初识 MediaQuery、Flutter（6）：基础组件之Image、一文解决Flutter中使用TextField遇到的各种疑难杂症等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！