一. Flutter单位

1.1. Flutter中的单位

在进行Flutter开发时，我们通常不需要传入尺寸的单位，那么Flutter使用的是什么单位呢？

• Flutter使用的是类似于iOS中的点pt，也就是point。
• 所以我们经常说iPhone6的尺寸是375x667（逻辑分辨率），但是它的分辨率其实是750x1334（物理分辨率）。
• 因为iPhone6的dpr（devicePixelRatio）是2.0，iPhone6plus的dpr是3.0。

在Flutter开发中，我们使用的是对应的逻辑分辨率。

1.2. Flutter设备信息

获取屏幕上的一些信息，可以通过MediaQuery。

// 1.媒体查询信息
final mediaQueryData = MediaQuery.of(context);

// 2.获取宽度和高度
final screenWidth = mediaQueryData.size.width;
final screenHeight = mediaQueryData.size.height;
final physicalWidth = window.physicalSize.width;
final physicalHeight = window.physicalSize.height;
final dpr = window.devicePixelRatio;
print("屏幕width:$screenWidth height:$screenHeight");
print("分辨率: $physicalWidth - $physicalHeight");
print("dpr: $dpr");

// 3.状态栏的高度
// 有刘海的屏幕:44 没有刘海的屏幕为20
final statusBarHeight = mediaQueryData.padding.top;
// 有刘海的屏幕:34 没有刘海的屏幕0
final bottomHeight = mediaQueryData.padding.bottom;
print("状态栏height: $statusBarHeight 底部高度:$bottomHeight");

获取一些设备相关的信息，可以使用官方提供的一个库：

dependencies:
  device_info: ^0.4.2+1

二. 适配方案

2.1. 适配概述

假如我们有下面这样一段代码：

• 在屏幕中间显示一个200*200的Container
• Container中有一段文字是30大小

class HYHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("首页"),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          color: Colors.red,
          alignment: Alignment.center,
          child: Text("Hello World", style: TextStyle(fontSize: 30, color: Colors.white),),
        ),
      ),
    );
  }
}

上面的代码在不同屏幕上会有不同的表现：

• 很明显，如果按照上面的规则，在iPhone5上面，尺寸过大，在iPhone6plus上面尺寸过小。
• 在开发中，我们应该可以根据不同的屏幕来完成尺寸的缩放。

在前端开发中，针对不同的屏幕常见的适配方案有下面几种：

rem方案：

• rem是给根标签（HTML标签）设置一个字体大小；
• 但是不同的屏幕要动画设置不同的字体大小（可以通过媒体查询，也可以通过js动态计算）；
• 其它所有的单位都使用rem单位（相对于根标签）；

vw、wh方案：

• vw和vh是将屏幕（视口）分成100等份，一个1vw相当于是1%的大小；
• 其它所有的单位都使用vw或wh单位；

rpx方案：

• rpx是小程序中的适配方案，它将750px作为设计稿，1rpx=屏幕宽度/750；
• 其它所有的单位都使用rpx单位；

这里我采用小程序的rpx来完成Flutter的适配。

2.2. rpx适配

小程序中rpx的原理是什么呢？

• 不管是什么屏幕，统一分成750份
• 在iPhone5上：1rpx = 320/750 = 0.4266 ≈ 0.42px
• 在iPhone6上： 1rpx = 375/750 = 0.5px
• 在iPhone6plus上：1rpx = 414/750 = 0.552px

那么我们就可以通过上面的计算方式，算出一个rpx，再将自己的size和rpx单位相乘即可（这里的px就是小程序中的单位，理解成pt就可以了）：

• 比如100px的宽度：100 * 2 * rpx
• 在iPhone5上计算出的结果是84px
• 在iPhone6上计算出的结果是100px
• 在iPhone6plus上计算出的结果是110.4px

我们自己来封装一个工具类，可以传入一个可选的参数，以什么尺寸作为设计稿，size_fit.dart文件如下：

import 'dart:ui';

class HYSizeFit {
  // 基本信息
  static double physicalWidth;
  static double physicalHeight;
  static double screenWidth;
  static double screenHeight;
  static double dpr;
  static double statusHeight;
  static double bottomSafeHeight;

  static double rpx;
  static double px;

  // 初始化方法
  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.底部安全距离
    bottomSafeHeight = window.padding.bottom / dpr;

    // 6.计算rpx的大小
    rpx = screenWidth / standardSize;
    px = screenWidth / standardSize * 2;
  }

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

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

初始化HYSizeFit类的属性：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 首先就初始化
    HYSizeFit.initialize();

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue, splashColor: Colors.transparent),
      home: HYHomePage(),
    );
  }
}

使用rpx来完成屏幕适配：

class HYHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    HYSizeFit.initialize(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("首页"),
      ),
      body: Center(
        child: Container(
          width: HYSizeFit.setPx(200),
          height: HYSizeFit.setRpx(400),
          color: Colors.red,
          alignment: Alignment.center,
          child: Text("Hello World", style: TextStyle(fontSize: HYSizeFit.setPx(30), color: Colors.white),),
        ),
      ),
    );
  }
}

我们来看一下实现效果：

2.3. 最佳实践

如果每次我们需要将现在的宽度或者高度，去使用HYSizeFit.setPx(200)或者HYSizeFit.setRpx(400)类似的方式去适配，显然看起来非常麻烦。

有没有更好的方案可以实现了？比如 200.px或者400.rpx，非常的清晰简洁。

当然可以，我们需要依赖Dart语言的一个特性：extension

• Dart从2.7.0开始，可以通过extension来给现有的类进行扩展（事实上Swift里面也有）
• 对现有的类包括：自定义的类、第三方库的类、系统的类

比如我们现在对String类型扩展：

• 扩展一个parseInt的方法，当然内部调用的是int.parse(this)，只是调用者变成了String本身

// 步骤一：扩展代码
extension NumberParsing on String {
  int parseInt() {
    return int.parse(this);
  }
  // ···
}

// 步骤二：调用代码
// 导入扩展类对应的模块
import 'string_apis.dart';
// 使用里面的方法
print('42'.padLeft(5)); // 使用String原有的方法
print('42'.parseInt()); // 使用String扩展的方法

显然，数字（比如200、200.0）有对应的包装类int、double，我们可以对其进行扩展：

1. 对int类型扩展，int_extension.dart文件如下：

import '../shared/size_fit.dart';

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

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

2. 对double类型扩展，double_extension.dart文件如下：

import '../shared/size_fit.dart';

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

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

如何使用？

import './extension/double_extension.dart';
import './extension/int_extension.dart';

print(200.px);
print(400.rpx);