Flutter Widgets MediaQuery控件屏幕信息适配_苹果IOS

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	是横屏还是竖屏。

获取设备相关信息：

import 'package:demo202112/utils/common_appbar.dart';
import 'package:flutter/cupertino.dart';
import "package:flutter/material.dart";
class wymediaquery extends statefulwidget {
  const wymediaquery({key? key}) : super(key: key);
  @override
  _wymediaquerystate createstate() => _wymediaquerystate();
}
class _wymediaquerystate extends state<wymediaquery> {
  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: getappbar('mediaquery'),
      body: mediaquery(data: const mediaquerydata(),
      child: _getdevicemediainfo(),),
    );
  }
  _getdevicemediainfo(){
    //屏幕大小
    size msize = mediaquery.of(context).size;
    //密度
    double mratio = mediaquery.of(context).devicepixelratio;
    //设备像素
    double width = msize.width * mratio;
    double height = msize.height * mratio;
    // 上下边距 （主要用于 刘海  和  内置导航键）
    double toppadding = mediaquery.of(context).padding.top;
    double bottompadding = mediaquery.of(context).padding.bottom;
    double textscalefactor = mediaquery.of(context).textscalefactor;
    brightness platformbrightness = mediaquery.of(context).platformbrightness;
    edgeinsets viewinsets = mediaquery.of(context).viewinsets;
    edgeinsets padding = mediaquery.of(context).padding;
    bool alwaysuse24hourformat = mediaquery.of(context).alwaysuse24hourformat;
    bool accessiblenavigation = mediaquery.of(context).accessiblenavigation;
    bool invertcolors = mediaquery.of(context).invertcolors;
    bool disableanimations = mediaquery.of(context).disableanimations;
    bool boldtext = mediaquery.of(context).boldtext;
    orientation orientation= mediaquery.of(context).orientation;
    // bool alwaysuse24hourformat = mediaquery.of(context).alwaysuse24hourformat;
    return container(
      padding: edgeinsets.all(30),
      child: column(
      children: [
        text('屏幕大小:${msize.width} x ${msize.height}'),
        text('密度:${mratio}'),
        text('设备像素大小:${width} x ${height}'),
        text('上边刘海:${toppadding}'),
        text('下边导航:${bottompadding}'),
        text('textscalefactor: ${textscalefactor}'),
        text('platformbrightness: ${platformbrightness}'),
        text('viewinsets: ${viewinsets}'),
        text('padding: ${padding}'),
        text('alwaysuse24hourformat: ${alwaysuse24hourformat}'),
        text('accessiblenavigation: ${accessiblenavigation}'),
        text('invertcolors: ${invertcolors}'),
        text('disableanimations: ${disableanimations}'),
        text('boldtext: ${boldtext}'),
        text('orientation: ${orientation}'),
        text('orientation: ${orientation}'),
      ],
    ),);
  }
}

运行效果：

随着屏幕旋转，设备信息跟着屏幕方向在变动。

使用场景

根据尺寸构建不同的布局

safearea控件就是通过mediaquery.of来实现的，平板和手机的（或者横屏和竖屏）布局可能是不一样的，布局判断：

var screensize = mediaquery.of(context).size;
if(screensize.width>onecolumnlayout){
  //平板布局
}else{
  //手机布局
}

onecolumnlayout表示一列布局的宽度。

系统字体变化

很多app都有一个功能就是调节字体大小，通过mediaquery来实现，实现如下：

  //textscalefactor 从1变到1.5，字体会全部增大
    var _data = mediaquery.of(context).copywith(textscalefactor: 1.0);
    return scaffold(
      appbar: getappbar('mediaquery'),
      body: mediaquery(data: _data,
      child: _getdevicemediainfo(),),
    );

运行效果：

第三方屏幕的适配框架：

flutter_screenutil：用于调整屏幕和字体大小的颤振插件。让你的ui在不同的屏幕尺寸上显示合理的布局!

api适配：

    screenutil().setwidth(540)  (dart sdk>=2.6 : 540.w)   //根据屏幕宽度适配尺寸
    screenutil().setheight(200) (dart sdk>=2.6 : 200.h)   //根据屏幕高度适配尺寸(一般根据宽度适配即可)
    screenutil().radius(200)    (dart sdk>=2.6 : 200.r)   //根据宽度或高度中的较小者进行调整
    screenutil().setsp(24)      (dart sdk>=2.6 : 24.sp)   //适配字体
    12.sm   // 取12和12.sp中的最小值
    screenutil.pixelratio       //设备的像素密度
    screenutil.screenwidth   (dart sdk>=2.6 : 1.sw)   //设备宽度
    screenutil.screenheight  (dart sdk>=2.6 : 1.sh)   //设备高度
    screenutil.bottombarheight  //底部安全区距离，适用于全面屏下面有按键的
    screenutil.statusbarheight  //状态栏高度 刘海屏会更高
    screenutil.textscalefactor //系统字体缩放比例
    screenutil().scalewidth  // 实际宽度设计稿宽度的比例
    screenutil().scaleheight // 实际高度与设计稿高度度的比例
    screenutil().orientation  //屏幕方向
    0.2.sw  //屏幕宽度的0.2倍
    0.5.sh  //屏幕高度的50%
    20.setverticalspacing  // sizedbox(height: 20 * scaleheight)
    20.horizontalspace  // sizedbox(height: 20 * scalewidth)
    const rpadding.all(8)   // padding.all(8.r) - 获取到const的优点
    redgeinsts.all(8)       // edgeinsets.all(8.r)
    edgeinsets.only(left:8,right:8).r // edgeinsets.only(left:8.r,right:8.r).

适配字体

//输入字体大小（单位与初始化时的单位相同）
screenutil().setsp(28) 
28.sp
//例子:
column(
  crossaxisalignment: crossaxisalignment.start,
  children: <widget>[
    text(
      '16sp, 因为设置了`textscalefactor`，不会随系统变化.',
      style: textstyle(
        color: colors.black,
        fontsize: 16.sp,
      ),
      textscalefactor: 1.0,
    ),
    text(
      '16sp,如果未设置，我的字体大小将随系统而变化.',
      style: textstyle(
        color: colors.black,
        fontsize: 16.sp,
      ),
    ),
  ],
)

设置字体不随系统字体大小进行改变 app全局

       materialapp(
        debugshowcheckedmodebanner: false,
        title: 'flutter_screenutil',
        theme: themedata(
          primaryswatch: colors.blue,
        ),
        builder: (context, widget) {
          return mediaquery(
            ///设置文字大小不随系统设置改变
            data: mediaquery.of(context).copywith(textscalefactor: 1.0),
            child: widget,
          );
        },
        home: homepage(title: 'flutterscreenutil demo'),
      ),

单独的text:

text("text", textscalefactor: 1.0)

指定的小部件：

mediaquery(
  // 如果这里context不可用，你可以新建一个 [builder] 将 [mediaquery] 放入其中
  data: mediaquery.of(context).copywith(textscalefactor: 1.0),
  child: anywidget(),
)