Flutter 94: 初识 MediaQuery-阿里云开发者社区

开发者社区> 开发与运维> 正文

Flutter 94: 初识 MediaQuery

简介: 0 基础学习 Flutter,第九十四步:了解一下 MediaQuery 的基本用法!

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

MediaQuery

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

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

1. MediaQuery()

const MediaQuery({
    Key key,
    @required this.data,
    @required Widget child,
})

2. MediaQuery.removePadding() 删除内边距

factory MediaQuery.removePadding({
    Key key,
    @required BuildContext context,
    bool removeLeft = false,
    bool removeTop = false,
    bool removeRight = false,
    bool removeBottom = false,
    @required Widget child,
})

3. MediaQuery.removePadding() 删除视图内边距

factory MediaQuery.removeViewInsets({
    Key key,
    @required BuildContext context,
    bool removeLeft = false,
    bool removeTop = false,
    bool removeRight = false,
    bool removeBottom = false,
    @required Widget child,
})

MediaQueryData

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

const MediaQueryData({
    this.size = Size.zero,
    this.devicePixelRatio = 1.0,
    this.textScaleFactor = 1.0,
    this.platformBrightness = Brightness.light,
    this.padding = EdgeInsets.zero,
    this.viewInsets = EdgeInsets.zero,
    this.systemGestureInsets = EdgeInsets.zero,
    this.viewPadding = EdgeInsets.zero,
    this.physicalDepth = double.maxFinite,
    this.alwaysUse24HourFormat = false,
    this.accessibleNavigation = false,
    this.invertColors = false,
    this.highContrast = false,
    this.disableAnimations = false,
    this.boldText = false,
});

1. size

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

print('屏幕 Size -> ${MediaQuery.of(context).size}');

print('按钮 Size -> ${_itemExpandedKey.currentContext.size}');
print('文字 Size -> ${_itemTextKey.currentContext.size}');
print('文字 Size -> ${MediaQuery.of(_itemTextKey.currentContext).size}');

2. devicePixelRatio

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

print('屏幕像素比 -> ${MediaQuery.of(context).devicePixelRatio}');

3. orientation

      orientation 为横竖屏,Orientation.landscape 为横屏,Orientation.portrait 为竖屏;

print('横竖屏 -> ${MediaQuery.of(context).orientation}');

4. textScaleFactor

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

print('字体像素比 -> ${MediaQuery.of(context).textScaleFactor}');

MediaQuery(data: MediaQuery.of(context).copyWith(textScaleFactor: 1.2),
    child: Text('字体像素比 * 1.2', style: TextStyle(color: Colors.white, fontSize: 16.0));
print('字体像素比 * 1.2 -> ${MediaQuery.of(context).copyWith(textScaleFactor: 1.2).textScaleFactor}');


5. platformBrightness

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

print('亮度模式 -> ${MediaQuery.of(context).platformBrightness}');

6. alwaysUse24HourFormat

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

print('24 小时制 -> ${MediaQuery.of(context).alwaysUse24HourFormat}');

7. accessibleNavigation

      accessibleNavigation 为是否使用 TalkBackVoiceOver 之类的辅助功能与应用程序进行交互,用以辅助视力障碍人群;

print('亮度模式 -> ${MediaQuery.of(context).accessibleNavigation}');

8. invertColors

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

print('颜色反转 -> ${MediaQuery.of(context).invertColors}');

9. highContrast

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

print('前后背景高对比度 -> ${MediaQuery.of(context).highContrast}');

10. disableAnimations

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

print('是否减少动画 -> ${MediaQuery.of(context).disableAnimations}');

11. boldText

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

print('是否使用粗体 -> ${MediaQuery.of(context).boldText}');

12. padding

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

print('内边距 -> ${MediaQuery.of(context).padding}');

13. viewInsets

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

print('键盘遮挡内边距 -> ${MediaQuery.of(context).viewInsets}');

14. systemGestureInsets

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

print('系统手势边距 -> ${MediaQuery.of(context).systemGestureInsets}');

15. viewPadding

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

print('系统手势边距 -> ${MediaQuery.of(context).systemGestureInsets}');

16. physicalDepth

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

print('设备物理层级 -> ${MediaQuery.of(context).physicalDepth}');

Tips

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

var _itemExpandedKey = GlobalKey();
var _itemTextKey = GlobalKey();

Expanded(
    key: _itemExpandedKey,
    child: FlatButton(
        onPressed: () => _itemClick(2),
        child: Center(child: Text('按钮 Size', key: _itemTextKey, style: TextStyle(color: Colors.white, fontSize: 16.0))),
        color: Colors.purpleAccent.withOpacity(0.4)))

      MediaQuery 案例尝试


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

来源: 阿策小和尚

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章