跳到主要内容

加载资源

在运行时动态加载和替换资源。

在加载 Rive 文件后,当资源(图片、字体和音频)未嵌入 .riv 文件中时,你需要自行处理和加载它们,以便它们能正确显示。

Rive 文件包含对资源的引用,这些资源可以以下列方式之一存储:

内嵌资源

内嵌资源直接存储在 .riv 文件中,不需要任何干预即可工作。这是 Rive 文件资源加载方式的默认设置。

通过 CDN 加载

引用资源是配置为通过 Rive CDN 加载的资源。在编辑器中选择"通过 Rive CDN 加载"。

图片 CDN

图片资源可以通过 Rive 编辑器中的"使用 Rive 图片 CDN"设置配置为通过 CDN 加载。

引用资源

引用资源是在 Rive 编辑器中配置为通过 URL 加载的资源。运行时将像处理任何其他 URL 加载一样处理这些资源。

处理资源

Rive 尝试自动加载资源,但也提供了 Asset Handler API,让你可以完全控制资源的加载和处理方式。

示例

使用 Asset Handler API

在实例化 File 时,向参数列表中添加一个 assetLoader 回调。运行时在加载 .riv 文件时检测到的每个资源都会调用此回调,此回调负责处理运行时资源的加载,或者将责任传递并让运行时尝试以其他方式加载。

final fontFile = await File.asset(
'assets/acqua_text_out_of_band.riv',
riveFactory: Factory.rive,
assetLoader: (asset, bytes) {
// 替换未内嵌在 rive 文件中的字体资源
if (asset is FontAsset && bytes == null) {
final urls = [
'https://cdn.rive.app/runtime/flutter/IndieFlower-Regular.ttf',
'https://cdn.rive.app/runtime/flutter/comic-neue.ttf',
'https://cdn.rive.app/runtime/flutter/inter.ttf',
'https://cdn.rive.app/runtime/flutter/inter-tight.ttf',
'https://cdn.rive.app/runtime/flutter/josefin-sans.ttf',
'https://cdn.rive.app/runtime/flutter/send-flowers.ttf',
];

// 从字体 URL 列表中随机选择一个
http.get(Uri.parse(urls[Random().nextInt(urls.length)])).then((res) {
if (mounted) {
asset.decode(
Uint8List.view(res.bodyBytes.buffer),
);
setState(() {
// 强制重建,以防 Rive 图形不再推进
});
}
});
return true; // 告诉运行时不要自动加载该资源
} else {
// 告诉运行时继续尝试加载该资源(如果存在)
return false;
}
},
);

你提供的回调将接收 assetbytes 参数。

  • asset - FileAsset 对象的引用。你可以从此对象获取许多属性,如名称、资源类型等。你还会用它为动态加载的内容设置新的 Rive 特定资源。类型:FontAssetImageAssetAudioAsset
  • bytes - 资源的字节数组(如果作为内嵌资源可用)

重要提示:注意返回值是一个 boolean,你需要返回:

  • true 如果你打算自行处理并加载资源
  • false 如果你不想自行处理该资源的加载,并尝试让运行时加载该资源

⚠️ 警告:一旦 File 被释放,FileAsset 将不再有效,使用它将有风险。

资源