Flutter屏幕适配

Flutter屏幕适配

一、Flutter中的单位

1.1. 点-points

在刚开始，所有的图形位置都由坐标点指定。

点事抽象的单位，它们只在逻辑坐标系上有意义。

• 在进行Flutter开发时，我们通常不需要传入尺寸的单位，就像下边这种。

Scaffold(
      appBar: AppBar(
        title: Text("首页"),
      ),
      body: Center(
        child: Container(
          width: 400,
          height: 400,
          color: Colors.red,
          alignment: Alignment.center,
          child: Text("Hello World", style: TextStyle(fontSize: 20),),
        ),
      ),
    );

没有传入单位，此时其实用的是单位是pt，也就是point，点的概念。

• 拿iphone6 举例子常说iPhone6 的尺寸是 375x667 这个就是点的概念

1.2. 像素-pixels

我们说iPhone6 的物理像素 ，有的也叫分辨率 是 750x1334 ，这个指的是像素pixel，单位是px,UI设计出的图，单位就可能是px值。

1.3. 设备像素比-devicePixelRatio

我们说iPhone6 的 devicePixelRatio 等于2，这是怎么来的呢？
$$devicePixelRatio=\frac{物理像素（px值）}{点}$$

$$iphone6的devicePixelRatio：2=\frac{750(分辨率)}{375(尺寸点)}$$

在Flutter中可以通过 window 来获取

   // 1.手机的物理分辨率
    physicalWidth = window.physicalSize.width;
    physicalHeight = window.physicalSize.height;

    // 2.获取dpr 直接拿到比值
    dpr = window.devicePixelRatio;

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

网站找到一张很详细的图，可以参考：

二、适配方案

2.1 rpx 适配

参考王红元老师的讲解：

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

由此可以封装工具类：

完整代码如下：

import 'dart:ui';

class SizeFit {
  // 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;

  //iphone6 为基准 375的屏幕宽度  物理像素是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的大小
    rpx = screenWidth / standardSize;
    px = screenWidth / standardSize * 2;
  }

  //参考设计稿对应的是750 ，直接用这个
  static double setRpx(double size) {
    return rpx * size;
  }

  //参考设计稿对应的是375 ，直接用这个
  static double setPx(double size) {
    return px * size;
  }
}

在使用时必须初始化 调用

SizeFit.initialize()//默认的标准宽度是 750  可以根据UI设计稿更改

在使用时候选择调用

setRpx(double size) 或者  setPx(double size) 

2.2 flutter_screenutil

屏幕适配也可以使用第三方库：flutter_screenutil

地址：https://github.com/OpenFlutter/flutter_screenutil