基础知识整理:

1:物理像素和逻辑像素

逻辑像素分辨率即我们代码编写的长宽

比如一个contianer长100,宽100,这个设置的就是控件的逻辑像素

到了不同设备里面(不同设备像素比率不同),实际所占用的像素(也就是物理像素)=100(逻辑像素)*设备的像素比率

设备的MediaQuery.of(context).size.width获取的就是屏幕的逻辑宽度

2: 设备的像素比率(类似于安卓中的density)

 MediaQuery.of(context).devicePixelRatio

一个逻辑像素实际上占据了几个物理像素,比如小米redmi 12,一个逻辑像素就占据两个物理像素

看下面实例:

小米redmi 12C的设备分辨率为1650*720,这个又称为物理分辨率,1650和720又被称为物理高度和物理宽度

我们在画UI的时候,可以看到选择的像素为375*812,可以发现和redmi12的物理像素有很大关系,正好是1/2(忽略标题栏的高度引起的误差)

这里面就引申出一个问题,实际开发中蓝湖里面其实还有很多分辨率可以选择,那我们选择哪个像素来进行开发?实际上是根据自己开发的时候选择的设备(或者模拟器)来定的,通过MediaQuery.of(context).size.width查询自己设备的逻辑宽度,然后就到蓝湖选择这个宽度的像素进行开发,比如redmi12的逻辑宽度是360,那就选择375*812的像素来进行开发

从下面就可以非常清晰的看到,MediaQuery.of(context).size.width获取的就是设备的逻辑宽度,乘以像素比之后正好是手机的物理像素(也就是在系统设置里面可以看到的宽度)

因此可以发现,其实flutter是会自动适配宽度和高度的,比较简单,我我们开发的时候设置的宽高*设备像素比

比如小米redmi12,设置width=100,以为手机的像素比是2,最终width实际占据的像素是200

那么这里又会出现一个新问题,既然flutter会自动适配长款,还需要screenUtils干嘛?

以下做个测试

以redmi12手机为例(逻辑宽度是360)

情况一:

不使用screenUtils

设置组件width为219

查看inspector

发现逻辑宽度数据一致

情况二:

使用screenUtils

但是初始化的时候,screenUtils的宽设置为375(和蓝湖设计图宽度保持一致但是和手机的逻辑宽度360不一致)

设置组件width为219.w

查看inspector

发现逻辑宽度不一致

情况三:

使用screenUtils

但是初始化的时候,screenUtils的宽设置为360(和蓝湖设计图宽度(375)不一致但是和手机的逻辑宽度360不一致)

设置组件width为219.w

查看inspector

发现逻辑宽度又变成219

而且在情况二里面,我们发现210.2/219==360/375

Inspector里面组件最终的逻辑宽度=设置的宽度(219)*设备逻辑宽度(360)/ScreenUtils初始化时设置的宽度(375)

因此可以得出结论,当ScreenUtils初始化的时候的宽高和设备的逻辑宽高完全一致的时候,效果是完全一样的,换言之,如果初始化设置的宽高和设备的逻辑宽高不一致,则强制使用初始化设置的宽高为准,这样,不同的手机,都会强制使用screenUtils初始化时设置的宽高作为标准来达成统一

总结:

Flutter系统自带的适配是使用设备像素比来进行物理像素的适配,而screenUtils是进行逻辑像素的适配

比如,width=100

如果不使用screenutils,他会把当前的100直接当作逻辑像素,然后乘以设备像素比最终得到物理像素

如果使用screenutils,那当前的100就不能当初逻辑像素,需要先转换一次(最终的逻辑宽度=设置的宽度(100)*设备逻辑宽度/ScreenUtils初始化时设置的宽度),然后再乘以设备像素比,最终得到物理像素

因此所有开发者都需要确保在使用蓝湖开发的时候选择同样的分辨率进行开发,并且screenUtils初始化的时候,与蓝湖选择的分辨率保持一致

最后再测试一下Screenutils的效果,目的是代码写死宽度,再像素相差很大的设备上,最先显示的效果,宽度占比一致(也就是在屏幕中的视觉效果一致)

小米11 物理宽度1440 像素比3.5 逻辑宽度411.42

小米redmi12 c 物理宽度720 像素比2 逻辑宽度360

ScreenUtils初始化的宽度是375

先看小米11

设置width:100

最终物理宽度=100*411.42/375 * 3.5 = 383.6

屏幕占比 :383/1440=0.26

再看redmi12

设置width:100

最终物理宽度=100*360/375 * 2 = 192

屏幕占比 :192/720=0.26

最终发现,使用ScreenUtils确实可以让设置的宽度在不同设备上占据相同的宽度比例,完美适配不同屏幕

文章来源

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: