Flutter 屏幕适配

前言

任何一个前端平台开发无不可避免的都会遇到适配问题。

在 Flutter 中，默认是使用logical pixel逻辑像素的，系统拿到我们设的值，会自动判断在iOS或者Android上对应的尺寸，不用我们强制转换成某一个单位。

但是现在，我们希望可以与设计稿保持一致，所以需要一些解决方案。

方案一

直接使用 flutter_screenutil 库。

• 跳转 flutter_screenutil | Flutter Package

• 跳转 OpenFlutter/flutter_screenutil

方案二

flutter_screenutil 是一个优秀的方案，但是写起来有一些模板代码，我希望能有一个轻量 一点的方案。

需要知道以下内容：

1. 新版本 Flutter SDK 引入了 extension 的机制，可以对 class 进行扩展。

2. 在 Flutter dart:ui 库下有 window 属性，可以通过它来获取屏幕的物理尺寸。

知道了这些 ，就可以开始搞事了。

核心代码如下

import 'dart:ui';

class TLSizeFit {
  // 1.基本信息
  static double physicalWidth;
  static double physicalHeight;
  static double screenWidth;
  static double screenHeight;
  static double dpr;
  static double statusHeight;

  static double rpx;
  static double px;

// 这里设置standardSize 为可选属性，如果使用者愿意以非iPhone6为标准，那么你使用时候传入对应的标准即可。这里默认750
  static void initialize({double standardSize = 750}) {
    // 1.手机的物理分辨率
    physicalWidth = window.physicalSize.width;
    physicalHeight = window.physicalSize.height;

    // 2.获取dpr
    dpr = window.devicePixelRatio;

    // 3.宽度和高度
    screenWidth = physicalWidth / dpr;
    screenHeight = physicalHeight / dpr;

    // 4.状态栏高度
    statusHeight = window.padding.top / dpr;

    // 5.计算rpx px的大小, iPhone6下 1px = 2rpx
    rpx = screenWidth / standardSize;
    px = screenWidth / standardSize * 2;
  }

  static double setRpx(double size) {
    return rpx * size;
  }

  static double setPx(double size) {
    return px * size;
  }
}

extension DoubleFit on double {
  double get px {
    return TLSizeFit.setPx(this);
  }

  double get rpx {
    return TLSizeFit.setRpx(this);
  }
}

extension IntFit on int {
  double get px {
    return TLSizeFit.setPx(this.toDouble());
  }

  double get rpx {
    return TLSizeFit.setRpx(this.toDouble());
  }
}

如何使用

class DemoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    TLSizeFit.initialize();

    return Container(
      width: 100.px,
      height: 100.px,
      // 余略
    );
  }
}