Flutter 图片加载本地图片 AssetImage

作为一名 iOS 开发者，接触 flutter 加载本地图片时，就在思考，flutter 是怎么使用 @1x @2x @3x 图片的呢？

为了解决这个疑惑，我先隆重介绍一些 AssetImage 这个类。

一. AssetImage 类

AssetImage 会根据上下文来决定，从AssetBundle中获取对应的图片。
AssetBundle 是一个 flutter 应用的资源集合。

二. 那么 flutter 是怎么根据不同分比率的硬件来获取对应分辨率图片的呢？

• 答案就是根据开发的目录结构，来获取对应设置的图片。

具体情况举例如下:
比如我们有如下目录结构的以及对应分辨率的资源

icons/heart.png
icons/2.0x/heart.png
icons/3.0x/heart.png

当设备像素比(device pixel ratio) < 1 时候，icons/heart.png 的图片将会被使用。
当设备像素比 1 < (device pixel ratio) < 2 时候，icons/2.0x/heart.png 的图片将会被使用。
当设备像素比 2 < (device pixel ratio) < 3 时候，icons/3.0x/heart.png 的图片将会被使用。

• 这里涉及到 asset variants 我们称之为变体目录，本地图片文件变体。通常用 "Nx" 来命名变体目录，"N" 就是设备的像素比。
• 比如上面icons/1.5x/heart.png也是一个 icons/heart.png 合法的变体。
• 另外，如果 AssetImage 在主目录下 icons/heart.png没有读取到对应的图片，会逐级从icons/2.0x/heart.png 变体目录中查找。

三. 至此我们知道如何进行图片文件目录设计了，那么在代码中如何配置和使用呢？

首先在 pubspec.yaml 配置文件中，声明我们的图片。(仅需要声明主目录的就行，变体目录是 flutter 自动处理的)

flutter:
  assets:
    - icons/heart.png

然后，我们在使用图片的地方就可如下获取:

AssetImage('icons/heart.png')

flutter 最终会根据设备像素比例，去获取对应分辨率的图片。

四. 撒花结束，但是我想另外补充我一些尝试的结果。

情况一：如果我在 pubspec.yaml 配置文件中，只做了如下声明，可以正常读取图片资源吗？

flutter:
  assets:
    - icons/

答：这种声明方式，AssetImage 能读取到对应的图片资源，但是不会根据设备去获取不同分辨率，仅仅会读取 icons/ 这个主目录下的图片，比如我在 3x 设备像素比的屏幕，并不会读取 icons/3.0x/heart.png 目录下的图片。

情况二：UI 切给 iOS 的图标，一般是 heart.png [email protected] [email protected]。这种图片能直接用吗？
答：经过测试，不能直接用，必须把图片 @2x 和 @3x 去掉，然后分目录存放。