赞
踩
众所周知,flutter中获取宽高有两种方法
(1)MediaQuery.of(context).size.width
(2)window.physicalSize.width
其实这两种获取宽高的方法其实是一样的,第一种就是获取的第二种,如下图所示
size = window.physicalSize / window.devicePixelRatio,window.physicalSize就是物理像素,也就是一屏宽实际包含的像素点,那后面的window.devicePixelRatio是什么呢?
为了搞清这个问题,我们需要了解更加全面的知识
以下常见的几个数据
1:逻辑宽高
2:物理宽高
3:手机的分辨率320x480(现在基本上是1080x1920或者更高)
4:ppi : pixels per inch(像素密度,所表示的是每英寸所拥有的像素数量)
4:安卓开发中见到的density,密度系数
5:上面的devicePixelRatio
物理宽高很容易理解,就是一屏幕宽包含实际的像素点的个数,比如手机设置里面显示320x480,那就说明屏幕宽度实际像素点有320,那1080x1920也就意味着屏幕宽度实际像素点有1080,但是我们开发的时候不可能针对不同像素写多套代码,比如某天ui针对320x480设备
设计了一张图,宽度是160,在320x480设备上,我们只需要写width=320dp,你会发现,在任何设备上他都可以自动适配,她是如何适配的呢,问题的关键就在于理解ppi和density,我们从手机里面只能看到手机尺寸和像素,我们根据这两项就可以求出手机对角线上面1英寸包含的物理像素
个数,方法如下
求出这个ppi之后有啥用嘞?问得好,用这个ppi就可以求出手机的密度系数density,我们规定ppi=160,密度系数是1,可以参考下面的密度系数表
我们发现1080x1920密度系数是320x480的3倍(480/160), 好了,你又要问,这个density密度系数有啥个啥,有啥用?用处可大了,手机里面的适配就是靠这个值,比如手机A密度系数是1,手机B密度系数是3,那么同样的代码,比如宽带写了50,在手机A里面,他的实际像素个数就是50*1=50,而在手机B里面,虽然我们写的是50,但是手机适配之后的实际像素是50*3=150,最后导致我们在不同手机上看到的效果是一样的,而我们写代码写的宽高就是逻辑宽高,不是最终的实际宽高,最后总计
先计算出手机的ppi(像素密度),再计算出density(密度系数),最后
实际像素=逻辑像素(也就是代码里面写的宽高)*density
加油!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。