flutter中的资源和图片加载示例详解

封面图

下个季度的目标是把前端监控相关的内容梳理出来，梳理出来之后可能会在公司内部做个分享～

Flutter应用程序既括代码也包括一些其他的资产，我们通常这些资产为资源。

有时候我会思考assets这个单词，在程序中到底应该翻译为资产呢？还是翻译为资源？按照习惯，我们这里还是称为资源好了～

这些资源是一些与应用程序捆绑在一起和并且部署应用时会用到的的文件，在运行时也可以进行访问。常见类型的资源包括静态数据（例如，JSON文件）、配置文件、图标和图像（JPEG、WebP、GIF、动画WebP/GIF、PNG、BMP和WBMP）等等。

指定相应的资源

Flutter使用位于项目根目录的pubspec.yaml文件来识别应用程序所需的资源。

yaml文件是一种类似于json的可读性高，用来表示数据序列化的文件格式。

比如：

flutter:
 assets:
   - assets/my_icon.png
   - assets/background.png

如果我们想要包含目录下的所有资产，我们需要指定目录名，并在末尾使用/字符：

flutter:
 assets:
   - directory/
   - directory/subdirectory/

需要⚠注意的是：

/**
除非子目录中有同名文件，否则仅包含直接位于目录中的文件。
要添加位于子目录中的文件，请为每个目录创建一个条目。
**/

资源绑定 Asset bundling

flutter应用中的资源必须包含在应用中，同时，每个资源都需要在pubspec.yaml文件中指定相应的路径。资源之间的顺序无关紧要。

在Flutter应用的构建过程中，Flutter会将资源放入一个特殊的归档文件，称为asset bundle，应用程序在运行时从中读取相应的资源。

资源变体

应用的构建过程支持资源变体的概念：即，不同版本的资源有可能显示在不同的上下文之中。当我们在pubspec.yaml的assets部分中指定资源的路径时，构建过程会在相邻子目录中查找任何同名文件。然后，这些文件与指定的资源一起包含在asset bundle(资源包)中。

例如，假设我们有如下资源：

.../pubspec.yaml
.../graphics/my_icon.png
.../graphics/background.png
.../graphics/dark/background.png
...etc.

我们的pubspec.yaml文件配置如下：

flutter:
 assets:
   - graphics/background.png

这时候/graphics/background.png和/graphics/dark/background.png这两个文件都会出现在我们的asset bundle(资源包)之中。

前者被认为是一个主要的资源，后者则被认为是一个变体的资源。

如果我们只指定目录：

flutter:
 assets:
   - graphics/

那么，graphics/my_icon.png, graphics/background.png 以及 graphics/dark/background.png 都会包含在我们的asset bundle(资源包)之中。

加载资源

Flutter应用可以通过AssetBundle对象访问资源。

AssetBundle对象有两个主要的方法：

• loadString()可以让我们加载字符串相关的资源

• load()可以让我们加载图像以及二进制相关的资源

加载文本资源

每个Flutter应用程序都有一个rootBundle对象，方便访问主资源包。

我们可以从package:flutter/services.dart中直接导入这个方法，直接使用。

但是通常的建议是：通过使用DefaultAssetBundle组件来获取当前buildContext的AssetBundle。

这种方法允许父组件在运行时替换不同的AssetBundle，对于本地化或测试场景非常有用。

通常情况下，我们可以使用DefaultAssetBundle.of（）方法从应用程序的运行时rootBundle间接加载资产，例如JSON文件。

在组件的上下文之外，或者当AssetBundle的句柄不可用时，我们可以使用rootBundle直接加载此类资源。例如：

import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
 return await rootBundle.loadString('assets/config.json');
}

加载图片

Flutter可以根据当前设备像素比加载分辨率适当的图像。

AssetImage知道如何将逻辑请求的资源映射到与当前设备像素比率最匹配的资源上。为了使此映射正常工作，应根据特定的目录结构排列资产，例如：

.../image.png
.../Mx/image.png
.../Nx/image.png
...etc.

其中M和N是数字标识符，对应于其中包含的图像的标称分辨率。换句话说，它们指定了图像的设备像素比。

主要资源默认对应1.0的分辨率。例如，名为my_icon.png的图像：

.../my_icon.png
.../2.0x/my_icon.png
.../3.0x/my_icon.png

在设备像素比率为1.8的设备上，.../2.0x/my_icon.png这个图像将会被加载。在设备像素比率为2.7的设备上，.../3.0x/my_icon.png这个图像将会被加载。

如果未在&ldquo;图像&rdquo;组件件上指定渲染图像的宽度和高度，则使用标称分辨率缩放资源，使其占用与主资源相同的屏幕空间，只是分辨率更高。也就是说，如果/my_icon.png是72px乘72px，然后/3.0x/my_icon.png应为216px x 216px；但如果没有指定宽度和高度，它们都会呈现为72px乘72px（以逻辑像素为单位）。

想要真正的加载一张图片，我们只需要在组件的build方法中使用AssetsImage对象，例如：

return const Image(image: AssetImage('graphics/background.png'));

加载依赖包中的图片

想要加载依赖包中的图片，我们需要将包的名称传递给AssetImage对象。

假设我们有一个图片的依赖包名字为my_icons,它内部结构如下：

.../pubspec.yaml
.../icons/heart.png
.../icons/1.5x/heart.png
.../icons/2.0x/heart.png
...etc.

想要加载这些图片，我们需要这样使用：

return const AssetImage('icons/heart.png', package: 'my_icons');

最后

资源和图片的内容这里仅仅描述了一些基本的概念和用法～

当然还包括其他一些内容，比如：

• 资源的打包

• 不同平台的资源

• 等等

这些都是我们需要注意的内容～

来源：https://juejin.cn/post/7181525805044858939