flutter 屏幕适配最佳实践
计算公式:
实际尺寸 = UI尺寸 * 设备宽度/设计图宽度
1px 方案 : 1px = 1 / 设备像素比
默认750设计图
import 'package:flutter/material.dart';
import 'dart:ui';
class Adapt {
static MediaQueryData mediaQuery = MediaQueryData.fromWindow(window);
static double _width = mediaQuery.size.width;
static double _height = mediaQuery.size.height;
static double _topbarH = mediaQuery.padding.top;
static double _botbarH = mediaQuery.padding.bottom;
static double _pixelRatio = mediaQuery.devicePixelRatio;
static var _ratio;
static init(int number){
int uiwidth = number is int ? number : 750;
_ratio = _width / uiwidth;
}
static px(number){
if(!(_ratio is double || _ratio is int)){Adapt.init(750);}
return number * _ratio;
}
static onepx(){
return 1/_pixelRatio;
}
static screenW(){
return _width;
}
static screenH(){
return _height;
}
static padTopH(){
return _topbarH;
}
static padBotH(){
return _botbarH;
}
}
使用方式:
// 设置文本大小 30 为设计图尺寸
new Text(
'Hello World!',
style: TextStyle(
fontSize: Adapt.px(30),
)
)
不错,不错。
在release模式下使用mediaQuery需要注意重复获取设备信息,刚开始可能为零