1、 新版本Flutter SDK 引入了 extension的机制。可以对某个class 进行扩展。(swift中有类似机制)
2、屏幕适配一直是一个老生常谈的问题,随着机型越来越多,适配的场景也越来越复杂。
3、之前有了解过 微信小程序的适配方案,个人一直感觉是一个比较好的方式( iPhone6为标准尺寸)下面👇将引用小程序的方案来进行对 Flutter的尺寸设置。
Flutter dart:ui 库下有 window属性,可以通过它来获取 屏幕的物理尺寸。
size_fit.dart 文件
import 'dart:ui';
class TLSizeFit {
// 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;
// 这里设置standardSize 为可选属性,如果使用者愿意以非iPhone6为标准,那么你使用时候传入对应的标准即可。这里默认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 px的大小, iPhone6下 1px = 2rpx
rpx = screenWidth / standardSize;
px = screenWidth / standardSize * 2;
}
static double setRpx(double size) {
return rpx * size;
}
static double setPx(double size) {
return px * size;
}
}
Flutter 中extension的应用:👇
double_extension.dart 文件
import 'size_fit.dart';
extension DoubleFit on double {
double get px {
return TLSizeFit.setPx(this);
}
double get rpx {
return TLSizeFit.setRpx(this);
}
}
int_extension.dart 文件
import 'size_fit.dart';
extension IntFit on int {
double get px {
return TLSizeFit.setPx(this.toDouble());
}
double get rpx {
return TLSizeFit.setRpx(this.toDouble());
}
}
使用方式:
1、在启动入口对TLSizeFit进行初始化
2、在代码中设置
return Center(
child: Container(
color: Color.fromARGB(120, 110, 111, 1),
width: 100.px,
height: 100.px,
child: Text("宽度${window.physicalSize.width / window.devicePixelRatio / 750 * 2 * 100}"),
),
);
通过上面的设置,在不同设备上,展示的widget的尺寸就会不一样了。