Flutter中屏幕适配，尺寸设置

1、 新版本Flutter SDK 引入了 extension的机制。可以对某个class 进行扩展。（swift中有类似机制）
2、屏幕适配一直是一个老生常谈的问题，随着机型越来越多，适配的场景也越来越复杂。
3、之前有了解过 微信小程序的适配方案，个人一直感觉是一个比较好的方式（ iPhone6为标准尺寸）下面👇将引用小程序的方案来进行对 Flutter的尺寸设置。

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

size_fit.dart 文件

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;
  }
}

Flutter 中extension的应用：👇

double_extension.dart 文件

import 'size_fit.dart';

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

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

int_extension.dart 文件

import 'size_fit.dart';

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

使用方式：

1、在启动入口对TLSizeFit进行初始化

image.png

2、在代码中设置

return Center(
      child: Container(
        color: Color.fromARGB(120, 110, 111, 1),
        width: 100.px,
        height: 100.px,
        child: Text("宽度${window.physicalSize.width / window.devicePixelRatio / 750 * 2 * 100}"),
      ),
    );

通过上面的设置，在不同设备上，展示的widget的尺寸就会不一样了。

image.png