前言,最近一直闭关进入Flutter实战开发,遇见了最大的问题就是屏幕适配
其他某机型设备:
Screenshot_2019-04-30-12-10-55-607_M.X.png
作者本人设备:
Screenshot_2019-04-30-12-10-56-294_M.X.png
首先推荐用ScreenUtil这个dart包,不过我用的时候感觉老遇见问题,
setwidth跟setheight的区别我也没搞清楚,字体的大小也遇到了问题
还有几个关于屏幕适配的帖子感觉都不是很适用
然后就是用MediaQuery.of(context).size(dp)拿到屏幕的宽高然后按比例除以一个值
首先须知
dp是虚拟像素,在不同的像素密度(dpi)上会自动适配,是一种基于屏幕密度的抽象单位,在每英寸160点的显示器上,1dp=1px。
比如在像素密度是160的设备上,1dp=1px(像素)
在240dpi上,1dp=1.5px,
而在作者分辨率2280x1080(px) 440dpi的设备上,1dp=2.75px,
Flutter中window.devicePixelRatio就是后面的值,也就是你的dpi跟160的比值
通过简单的计算我的屏幕高就是2280/2.75=829.090909dp,宽就是1080/2.75=392.727273,
于是乎
Align(
alignment: Alignment.centerLeft,
child: Container(
height: 40,
width: 1080/2.75/2,
color: Colors.red,
),
),
效果
Screenshot_2019-04-30-12-40-16-061_windows.x.m.fl.png
红条就是宽度的一半
代码不动拿到480dpi的设备上就是
Screenshot_2019-04-30-12-44-28-030_windows.x.m.flutter_appasdsadasd.png
可想而知红色的不会占宽度一半,因为440dpi跟480dpi没差太多,所以还不是很严重,还是能看出变长了
然而平时一般又是直接把dp拿来用,更改马上看效果,不会每次就就去算它跟屏幕宽度的比例,于是作者每次写宽高都(以前自己写的dp)*2.75/window.devicePixelRatio;
Align(
alignment: Alignment.centerLeft,
child: Container(
height: 40,
width: (1080/2.75/2)*2.75/window.devicePixelRatio,
color: Colors.red,
),
),
乘以2.75(即当前设备的window.devicePixelRatio)转换为了px像素,再除以适配设备的window.devicePixelRatio,这样不管在任何设备,都会按屏幕比例显示大小,字体大小我也是这样干的,不知道会不会有其他异常
最后看下对比效果
作者本人设备:
其他高密度,低分辨率机型(未适配):
Screenshot_2019-04-30-12-59-36-006_M.X.png
成比例的变大了字体跟所有Widget的宽高
其他高密度,低分辨率机型(适配后的):
Screenshot_2019-04-30-12-58-23-864_M.X.png
可能看图片不明显但作者是用真机调试仔细对比过的,反正感觉上比例就跟自己设备差不多,啊哈哈,原理上也感觉行得通,具体实不实用还得看自己用的情况
还有其他有些东西都准备分享给有同样问题的人,慢慢的会写出来,闭关太久了,
最后本人Flutter实战软件的链接MX工具箱,暂时还不开源,
网友评论