这两天在研究Flutter的屏幕适配方案。
关于尺寸大小已经有点眉目了,初步定了利用等比例缩放,感兴趣的朋友可移步Flutter屏幕大小适配。
但是还是不清楚怎么进行图片分辨率适配的,在百度了之后,仍然有点云里雾里,罢了,直接上官网看吧,果然,清晰了。这里附上官网链接Image.asset页面。
这里只说本地文件夹下图片资源配置及使用的问题。关于构造函数、使用别的包里的图片等其他情况不做叙述。
我最初在看的时候一直在纠结以下几个问题:
- iOS和Android是共用一套图片吗?是怎么共用的?
- 各个平台系统是怎么判断该用哪个分辨率的图片的呢?
- 不同分辨率的图片我应该怎么放?
- 在yaml文件中怎么配置?怎么引用?
下面一一解答上面的4个问题。
iOS和Android是共用一套图片吗?是怎么共用的?
既然用flutter,是为了ios和Android工台开发一套代码,那图片肯定也是可以一起用的,其实我的疑问主要在后半句,怎么共用。
不同分辨率的图片我应该怎么放?
一般我们将图片资源放在跟pubspec.yaml同级的一个image文件夹下,然后在image文件夹下新建2.0x、3.0x子文件夹,将对应倍数的图片放到对应的文件夹内,直接在image文件夹下的是倍数为1.0的。
在yaml文件中怎么配置
官网那个截图中就是比较详细,每一张图片的1.0、2.0、3.0都声明了。
我自己写的比较简略,直接写“img/”这种,表示 img/ 这个文件夹下面的所有图片。
在准备图片资源的时候,1.0倍的可以省略,如果省略了,系统会直接使用最接近的,如2.0倍数的,但是在yaml文件中的声明不能省略。
但假如我使用了简写img/这种方式,1.0倍的forward.png图片在img文件夹中是没有的,所以用img/不能声明到,要单独声明一下,这样调用的时候才能加载到子文件夹中的图片(见上面的图)。
各个平台系统是怎么判断该用哪个分辨率的图片的呢?
flutter中会首先根据系统的devicePixelRatio(每一个逻辑像素包含多少个原始像素,可以通过MediaQueryData.devicePixelRatio来得到)来找对应倍数的文件夹下的图片,如果没有对应倍数,找最接近的。
怎么使用?
使用的时候,不用带2x、3.5x这些,直接是1.0倍的那个声明,粘贴过来就行: