Flutter屏幕适配之二：Image资源assets的使用，实现不同分辨率图片的适配

这两天在研究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倍的那个声明，粘贴过来就行：

官网截图