現(xiàn)代手機(jī)屏幕尺寸各不相同，導(dǎo)致我們平時(shí)寫布局的時(shí)候會(huì)在個(gè)不同的移動(dòng)設(shè)備上顯示的效果不同。
為了達(dá)到一套代碼所有手機(jī)體驗(yàn)一致效果顾患，需要做尺寸上的適配徙歼。
適配方案：
計(jì)算公式：實(shí)際尺寸 = UI尺寸 * 設(shè)備寬度/設(shè)計(jì)圖寬度
1px方案 : 1px = 1 / 設(shè)備像素比
實(shí)現(xiàn)代碼如下（以750設(shè)計(jì)圖為例）：
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;
}
}
解析：
1、默認(rèn)750設(shè)計(jì)圖
2画恰、引入 'dart:ui' 獲得屏幕尺寸相關(guān)信息
3、計(jì)算真實(shí)像素值
使用方式：
設(shè)置文本大小 30 為設(shè)計(jì)圖尺寸
new Text(
'Hello World!',
style: TextStyle(
fontSize: Adapt.px(30),
)
)
容器尺寸大小設(shè)置 一個(gè)設(shè)計(jì)圖為 300*300像素的容器
new Container( width: Adapt.px(300),
height: Adapt.px(300),
)
1px
new Container(
decoration: new BoxDecoration(
border: new Border(bottom:BorderSide(width: Adapt.one())),
),
)
