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倍的那个声明,粘贴过来就行:

官网截图
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值