如何在flutter_svg中使用preCachePicture()

5us2dqdw 于 2023-02-09 发布在 Flutter

关注(0)|答案(3)|浏览(179)

我使用flutter_svg包在应用程序中渲染SVG图像，因为flutter还没有正式支持SVG，所以在我的应用程序中加载SVG图像时，我可能会延迟几秒钟，在寻找解决方案时，我发现我可以使用preCachePicture()预加载SVG图像。问题是官方的flutter_svg文档没有明确说明，也没有其他Web材料来说明如何使用此函数预加载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()后，当我想使用预缓存的图像时，如何加载它？

flutter

来源：https://stackoverflow.com/questions/62257156/how-to-use-precachepicture-in-flutter-svg

3条答案

按热度按时间

fae0ux8s1#

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

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

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

更新：根据riccardogabellone的评论，从2021年底开始，我们应该使用SvgPicture.svgStringDecoderOutsideViewBoxBuilder或SvgPicture.svgStringDecoderBuilder来代替SvgPicture.svgStringDecoder。

赞(0）回复(0）举报 2023-02-09

pcww981p2#

在小部件的initState中调用precache已经太晚了，应该在main（）函数中调用这个方法，如下所示：

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

赞(0）回复(0）举报 2023-02-09

v1uwarro3#

**2023年更新：**扑动_svg 2.0.0+1

您可能已经注意到precachePicture已被弃用。hygehyge提出了一个新的工作解决方案：

const loader = SvgAssetLoader('res/large_icon.svg');
svg.cache.putIfAbsent(loader.cacheKey(null), () => loader.loadBytes(null));

赞(0）回复(0）举报 2023-02-09

我来回答

如何在flutter_svg中使用preCachePicture()

3条答案

相关问题

热门标签

最新问答