Flutter 适配android/iOS设备的单位换算

参考 : flutter 屏幕适配方案自定义单位

前几天获取了Flutter 屏幕的宽高, 基于这个, 我们再搞一下适配的问题, 依旧是基于主流设计的机型 iPhone6s 的尺寸 pt:375 / 667

提供一个转换方法类,

/// -------------------------------
/// Created with Flutter Dart File.
/// User [email protected]
/// Date: 2020-08-10
/// Time: 11:26
/// Des: 用于记录一些 全局共享的基础数据
/// -------------------------------

///

import 'dart:ui';

class GlobalUtils {
  static num screenW; //设备的宽高
  static num screenH; //设备的宽高
  static num statusBarH; //设备的状态栏高度
  static num devicePixelRatio; // 设备的像素密度
  static Size physicalSize; // 设备的尺寸... (px)
  static num deviceScale; // 基于iPhone6 的基本尺寸单位换算设备缩放比

  /// 初始化设备的宽高
  /// 全局记录设备的基本信息
  GlobalUtils.initDeviceW_H() {
    // 从 window对象获取屏幕的物理尺寸(px) 及 像素密度
    final physicalSize = window.physicalSize;
    final devicePixelRatio = window.devicePixelRatio;
    final padding = window.padding;

    GlobalUtils.devicePixelRatio = devicePixelRatio;
    GlobalUtils.physicalSize = physicalSize;

    // 计算出ios/android 常用的屏幕逻辑宽高 (dp / pt);
    GlobalUtils.screenW = GlobalUtils.physicalSize.width / GlobalUtils.devicePixelRatio;
    GlobalUtils.screenH = GlobalUtils.physicalSize.height / GlobalUtils.devicePixelRatio;
    GlobalUtils.statusBarH = padding.top / GlobalUtils.devicePixelRatio;

    // 基于6s机型(基于375,为了便捷查看,我们基于375的物理尺寸即750px为缩放基准),计算缩放比
    // 该缩放比 为 不同设备的的逻辑尺寸与 iPhone6s 的逻辑尺寸的缩放比
    GlobalUtils.deviceScale = GlobalUtils.screenW / (375);
  }

  /// 提供基于px的各机型尺寸适配换算
  /// 入参必须是以px为单位的宽高数值
  static pxFix(num w_h_px) {
    if (GlobalUtils.screenW <= 0 || GlobalUtils.screenW == null) {
      // 初始化一下
      GlobalUtils.initDeviceW_H();
    }
    return w_h_px / 2 * GlobalUtils.deviceScale;
  }

  /// 提供基于dp的各机型适配换算
  /// 入参必须是以dp为单位的宽高数值
  static dpFix(num w_h_dp){
    if (GlobalUtils.screenW <= 0 || GlobalUtils.screenW == null) {
      // 初始化一下
      GlobalUtils.initDeviceW_H();
    }
    return w_h_dp * GlobalUtils.deviceScale;
  }

  /// 提供基于pt的各机型适配换算
  /// 入参必须是以pt为单位的宽高数值
  static ptFix(num w_h_pt){
    if (GlobalUtils.screenW <= 0 || GlobalUtils.screenW == null) {
      // 初始化一下
      GlobalUtils.initDeviceW_H();
    }
    return w_h_pt * GlobalUtils.deviceScale;
  }

}

我们再提供一个 extension, 我们创建一个extension的文件目录讲所有以后需要增加的extension都放进去,

/// -------------------------------
/// Created with Flutter Dart File.
/// User [email protected]
/// Date: 2020-08-12
/// Time: 13:23
/// Des:
/// -------------------------------

///
///

import 'package:ebankhome/utils/GlobalUtils.dart';


/// 为num 添加扩充类 DeviceUnit 设备单位换算
extension DeviceUnit on num {

  /// [px] 为 以px为单位的 w_h 数值提供不同设备的尺寸适配
  num get px {
    return GlobalUtils.pxFix(this);
  }

  /// [dp] 为 以dp为单位的 w_h 数值提供不同设备的尺寸适配
  num get dp {
    return GlobalUtils.dpFix(this);
  }

  /// [pt] 为 以pt为单位的 w_h 数值提供不同设备的尺寸适配
  num get pt {
    return GlobalUtils.ptFix(this);
  }
}

使用

    print('==========');
    print(GlobalUtils.screenW);
    print(750.px);
    print(GlobalUtils.screenH);
    print('==========');

Mi10的log:
I/flutter ( 5113): ==========
I/flutter ( 5113): 392.72727272727275
I/flutter ( 5113): 392.72727272727275
I/flutter ( 5113): 834.9090909090909
I/flutter ( 5113): ==========

iPhone11的log:
flutter: ==========
flutter: 414.0
flutter: 414.00000000000006
flutter: 896.0
flutter: ==========