如何在flutter_svg中使用preCachePicture()

Posted 2023-02-23

【中文标题】如何在flutter_svg中使用preCachePicture()

【英文标题】：How to use preCachePicture() in flutter_svg

【发布时间】：2020-09-27 03:05:03

【问题描述】：

我正在使用 flutter_svg 包在我的应用程序中渲染 SVG 图像，因为 Flutter 尚未正式支持 SVG。我在尝试在我的应用程序中加载 SVG 图像并查看时可能会延迟几秒钟对于解决方案，我发现我可以使用preCachePicture() 预加载 SVG 图像。问题是官方flutter_svg 文档没有明确说明，也没有其他网络资料显示如何使用此功能预加载 SVG 图像。

我正在调用initState() 中的loadPictures() 函数来预加载SVG 图片。

String onboardImage = 'assets/images/onboard.svg';

@override
  void initState() 
    loadPictures();
    super.initState();
  

  Future<void> loadPictures() async 
    await precachePicture(ExactAssetPicture((SvgPicture.svgStringDecoder),onboardImage), null);    
   

调用preCachePicture()后，如何加载预缓存的图片 我什么时候想用它？

【问题讨论】：

文档说：“如果图像稍后被 SvgPicture 使用，它可能会加载得更快。图像的使用者不需要使用相同的 PictureProvider 实例。PictureCache只要两张图片共享相同的密钥，就会找到该图片。”

@pskink 我明白了，但你能解释一下文档吗？

@pskink 你能回答把钥匙放在哪里吗？由于 SvgPicture 将键作为参数，但 preCachePicture 似乎没有在构造函数中使用键。

您需要在preCachePicture 和SvgPicture 中使用相同的PictureProvider

【参考方案1】：

要缓存多个 SVG，请执行以下操作：

Future.wait([
  precachePicture(
    ExactAssetPicture(SvgPicture.svgStringDecoder, 'assets/my_icon.svg'),
    null,
  ),
  precachePicture(
    ExactAssetPicture(SvgPicture.svgStringDecoder, 'assets/my_asset.svg'),
    null,
  ),
  // other SVGs or images here
]);

注意：在main.dart 中执行此操作，或在使用 SVG 的小部件之前显示的小部件中执行此操作。例如，如果您需要 svg 用于登录或注册，则可以在启动屏幕上执行此操作。

【讨论】：

上次包更新：应该使用 SvgPicture.svgStringDecoderOutsideViewBoxBuilder 或 SvgPicture.svgStringDecoderBuilder 代替 SvgPicture.svgStringDecoder

@riccardogabellone 谢谢，我不会更新答案，但希望您的评论对其他人有所帮助:)

@Aleksandar 你应该。评论不太明显，您可以编辑您的答案并添加“编辑为 2021：使用......”

【参考方案2】：

在小部件的 initState 中调用 precache 为时已晚。您应该改为在 main() 函数中调用此方法，如下所示：

Future<void> main() async 
    await precachePicture(ExactAssetPicture(SvgPicture.svgStringDecoder, 'assets/images/onboard.svg'), null);
    runApp(YourApp());

【讨论】：

如果我必须缓存多个 svg 怎么办？

@Shubhamhackz 在下面查看我的答案 :)

【参考方案3】：

而不是在initState 中预缓存图像，您应该在didChangeDependencies 中进行，喜欢：

@override
  void didChangeDependencies() 
    super.didChangeDependencies();
    precachePicture(
      ExactAssetPicture(SvgPicture.svgStringDecoder, 'assets/images/onboard.svg'),
      context,
    );
  

【讨论】：

为什么在didChangeDependencies 里面而不是initState 里面？您的答案未完成