第一百一十一回 如何实现屏幕适配

我们在上一章回中介绍了动画相关的内容，本章回中将介绍 如何适配屏幕.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们平常使用的手机屏幕大小不同，App运行在这些大小不同的屏幕上时效果却相同，其原因就是App对不同大小的屏幕做了适配。因此我们把程序中对不同屏幕大小做处理的操作叫作适配。

适配是移动开发中必不可少的内容，在Android和IOS原生开发中需要做适配，Flutter做为跨端开发的框架，也需要做适配工作。本章回中将介绍在Flutter开发中如何去适配大小不同的屏幕。

实现方法

适配的核心思想是把相同的尺寸乘以一定的比率，使得该尺寸在不同大小的屏幕上占用的屏幕空间相同，这样给人的感觉就是这个尺寸到不同大小的屏幕上看着都一样。

我们举例子来说明：80dp在480*720大小的屏幕上占用1/6屏幕宽度。在240*320大小的屏幕上如果想占用1/6宽度，那么需要40dp.此时就需要让80dp乘以比率0.5才通满足条件。依次类推，在720*960大小的屏幕上如果想占用1/6宽度就120dp,此时就需要让80乘以比率1.5才能满足条件。

适配的思想介绍完了，那么如何计算不同屏幕的比率呢？常用做法是选一个基准值，屏幕的宽度除以基准值就是比率，在App的UI设计中通常以iPone6的屏幕尺寸为基准，它的屏幕尺寸是一个中间尺寸，有比它小的屏幕也有比它大的屏幕，选用这个尺寸大小可以方便适配其它尺寸的屏幕。

iPhone6实际宽度375 * 667，单位是pt，分辨率:750 * 1334，单位是px。为什么是屏幕宽度呢？因为手机屏幕的宽度比长度小，所以通常以宽度和高度中的最小值来适配。

因此我们可以得到比率公式：屏幕比率=屏幕分辨率宽度/750. 750是iPhone6的屏幕宽度，也可以换成UI设计稿中的尺寸，通常设计稿件中的尺寸都是像素，因此这里使用750为基准值，如果设计
稿不以这个尺寸为基准值，那么把750换成设计稿中的尺寸就可以。

示例代码

///自己设计的屏幕适配类,转换单位为dp
class XScreenUtil {
  static double baseSize = 0;
  static double physicalWidth = 0;
  static double physicalHeight = 0;
  static double realWidth = 0;
  static double realHeight = 0;
  static double dpr = 0;
  static double statusBarHeight = 0;
  ///计算好的屏幕比率
  static double fitRatio = 0;
  ///计算好的屏幕比率,单位为像素
  static double fitRatioPx = 0;


  ///pt类似dp，ios中的屏幕单位point的缩写，px是像素缩小，在设计中使用广泛
  ///baseSize以iPhone6为基准，默认值是750px,375dp
  static void init(BuildContext context,[baseSize=375]) {
    ///获取屏幕物理分辨率,单位是px
    physicalWidth = View.of(context).physicalGeometry.width;
    physicalHeight = View.of(context).physicalGeometry.height;

    ///获取屏幕物理分辨率,单位是pt
    realWidth = MediaQuery.of(context).size.width;
    realHeight = MediaQuery.of(context).size.height;

    ///屏幕的比率，比如2x,3x
    dpr = View.of(context).devicePixelRatio;

    ///状态栏的高度，除以dpr才是屏幕中实际的的高度
    statusBarHeight = MediaQuery.of(context).padding.top / dpr;

    ///屏幕适配时以宽度为单位进行适合，screenutil包中分宽度和高度两种适配方式，w为宽度，h为度，ex200.w,200.h.
    ///实际项目中以宽度和高度中数值比较小的一个进行适配
    fitRatio = realWidth / baseSize;
    fitRatioPx = physicalWidth / baseSize * 2; ///iphone6的dp和px转换需要乘以2

    ///iphone6时实际值如下：
    // fitRatio = realWidth / 375;
    // fitRatioPx = physicalWidth / 750; ///iphone6的dp和px转换需要乘以2

    debugPrint('PWidth: $physicalWidth, PHeight: $physicalHeight, RWidth: $realWidth, RHeight: $realHeight dpr: $dpr, top: $statusBarHeight');
  }

  ///以pt为单位时使用此方法
  static double setFitRatio(double value) {
    return value * fitRatio;
  }

  ///以px为单位时使用此方法
  static double setFitRatioPx(double value) {
    return value * fitRatioPx;
  }
}

///使用自己设计的屏幕适配类来适配屏幕
Container(
  color: Colors.orange,
   width: XScreenUtil.setFitRatio(200),
   height: XScreenUtil.setFitRatio(200),
  child: const  Icon(Icons.pages),
),

上面的示例代码单独封装了一个类，通过类的静态方法可以直接使用屏幕比率，也就是代码中的setFitRatio()方法，代码中使用了MediaQuery类的size属性获取到了屏幕的宽度和长度。这个值会随着屏幕的不同而不同。需要注意的是尺寸的单位不一样，使用的方法也不一样。此外，代码中把基准值当作了类构造函数中的可选参数，如果指定了基准值，那么就使用基准值，反之使用默认值750.

看官们，关于"如何实现屏幕适配"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!