目前屏幕适配有几种主流的方案：
- rem：给根标签(html标签)设置一个字体大小，其它所有单位都使用rem(相对于根标签)。
- vw或vh：将屏幕等分为100等分，以横(宽)分为例,1vw等于视图宽度的1%。
- rpx：小程序适配方案，以750px为设计稿，1rpx=屏幕宽度/750。
在此，我们采用小程序方案：
- 不管什么屏幕，都统一分成750份；
- 在iPhone5上：1rpx = 320/750 = 0.4266 ≈ 0.42px
- 在iPhone6上：1rpx = 375/750 = 0.5px
- 在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导入两个扩展、工具、最后初始化工具
