flutter 屏幕适配分析(二)

目前屏幕适配有几种主流的方案：

• rem：给根标签(html标签)设置一个字体大小，其它所有单位都使用rem(相对于根标签)。
• vw或vh：将屏幕等分为100等分，以横(宽)分为例,1vw等于视图宽度的1%。
• rpx：小程序适配方案，以750px为设计稿，1rpx=屏幕宽度/750。

---

在此，我们采用小程序方案：

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

那么就可以通过这种方式计算出一个rpx的单位
比如：100px的宽度:100*2 *rpx

• iPhone5 对应宽度=100*2 *0.42=84px
• iPhone6 对应宽度=100*2 *0.5=100px
• iPhone6plus 对应宽度=100*2 *0.552=110.4px

---

工具封装：

class HYSizeFit {
  static double screenWidth;
  static double screenHeight;
  static double physicalWidth;
  static double physicalHeight;
  static double dpr;

  static double rpx;
  static double px;

  static void initialize({double standardWidth = 750}) {
    // 获取物理分辨率
    physicalWidth=window.physicalSize.width;
    physicalHeight=window.physicalSize.height;
    //获取dpr
    dpr=window.devicePixelRatio;
    //手机屏幕宽高
    screenWidth = physicalWidth/dpr;
    screenHeight = physicalHeight/dpr;
   // 计算rpx 和px大小
    rpx = screenWidth / standardWidth;
    px = screenWidth / standardWidth * 2;  // 必须是乘以2，因为是以iphone6(750)为标准
  }
  
  // 按照像素来设置
  static double setPx(double size) {
    return px * size ;
  }
  
  // 按照rpx来设置(如果给的设计稿是物理像素用rpx)
  static double setRpx(double size) {
    return rpx * size;
  }
}

使用:

// 记得初始化后使用!!!
width:HYSizeFit.setPx(200),
height:HYSizeFit.setRpx(400),
Text("Hello World", style: TextStyle(fontSize: HYSizeFit.setPx(30), color: Colors.white),)

---

当前使用的方式太过麻烦，必须使用HYSizeFit.setPx(200)这种方式,而我们可能需要优化一下:

简洁方式一: 200.px() 、200.5.px()
更加简洁方式二: 200.rpx、200.5.rpx

• 根据方式一(二),明显可以看出，需要扩展int类型和double类型

实现之前，需要补充一下dart语法 extension

/* extension 关键字可以用来扩展自定义类也可以扩展系统类*/

//方式一:扩展自定义
//好处:正常来说功能A与功能B都可以放在Person类里面，但是现在拆分来了，结构拆分，变得清晰
class Person{
  // 这里放一些基本的功能
}
extension PersonA onPerson{
 // 这里放一些特定的A功能
}
extension PersonB onPerson{
 // 这里放一些特定的B功能
}

//方式二:扩展系统类
main(){
  final String message="Hello World";
  // 正常来说字符串是没有hy_split(" ")这个方法的,但是我们对系统的字符串类做了扩展
  final res=message.hy_split(" ");
  print(res);
}
extension StrSplit on String{
  List hy_split(String split){
    return this.split(split);   
  }
}

开始封装扩展:

在项目目录如图:

目录.jpg

记得在main.dart里面全部引入int 和double的扩展。
double_extension.dart

import './size_fit.dart';

extension DoubleFit on double {
 double px(){
  return HYSizeFit.setPx(this)
 }
 double rpx(){
 //这里和上面都是用的方法定义,所以外面使用的时候是:width:200.5.rpx()
  return HYSizeFit.setRpx(this)
 }
/* 实际上上面的是可以省略的,如果要使用简洁方式一则保留上面两个方法*/

double get px {
    //这里的this是数字200.0, 相当于使用时 width: 200.0.px 里面的200.0 ，相当于是它调用方法
    return HYSizeFit.setPx(this);
  }

double get rpx {
    //这里和上面都是用的get ,所以外面使用的时候是:width:200.5.rpx
    return HYSizeFit.setRpx(this);
  }
}

int_extension.dart

import './size_fit.dart';

extension IntFit on int {
  double get px {
    // 因为我的工具size_fit自己规定了rpx与px都必须是double类型,所以这里也必须要转换一下
    return HYSizeFit.setPx(this.toDouble());
  }

  double get rpx {
// 因为我的工具size_fit自己规定了rpx与px都必须是double类型,所以这里也必须要转换一下
    return HYSizeFit.setRpx(this.toDouble());
  }
}

---

到此为止，所有都已封装完成,可以直接使用:简洁方式二适配屏幕了，使用前记得:maindart导入两个扩展、工具、最后初始化工具