详解flutter中本地资源图片的使用

一. flutter中我们想加载本地图片,需要两步:

  1. 在项目中创建images文件夹,然后在images文件夹(这个名字可以随便命名,一般我们会命名为images)下创建2.0x(2倍图)和3.0x(3倍图)两个文件夹(ps:我们的本地资源图片一般只需要2.0x和3.0x就可以了,1.0x和4.0x通常不需要),并将图片放入对应的文件夹中(注意:图片的名字要一样。比如:2.0x/home.png 3.0x/home.png)
1.png
  1. 需要在pubspec.yaml这个配置文件中设置图片的路径,如下格式。注意这里路径不用加2.0x和3.0x

    flutter:
      assets:
        - images/home.png
    

二. flutter项目中本地图片加载的原理

在加载图片时,系统自动会根据屏幕分辨率优先选择到符合自己分配率的文件夹(2.0x或者3.0x或者4.0x)下去取相对应的图片,如果当前文件夹下没有,则会到低一倍的文件夹下去,如果还没有,则继续向更低一倍去取。(比如:iOS 5.5英寸及以上屏幕会优先选择去3.0x下去取图片,如果3.0x不存在或者3.0x文件夹下没有,则去2.0x下取;如果2.0x不存在或者2.0x下没有,则去1.0x下取;1.0x下再没有,则在images文件下取)。

2.png
3.png
4.png