渲染时 Flutter SVG 延迟

Question

我在行中显示 SVG 文件形式的图像和文本。

由于某种原因，svg 图像的渲染速度比屏幕的其余部分慢，导致延迟，这不利于用户体验。

这种延迟正常吗？我该怎么做才能使整个屏幕同时渲染？

Row(
   mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SvgPicture.asset(
            'lib/assets/muslim_coloc_logo.svg',
            height: 40.0,
            width: 40.0,
          ),
          SizedBox(width: 2.0,),
          RichText(
            text: TextSpan(children: [
              TextSpan(
                text: 'uslim',
                style: MC_titleWhite,
              ),
              TextSpan(
                text: 'Coloc',
                style: MC_titleWhite50,
              ),
            ]),
          ),
        ],
      ),

Answer 1

更新：

  await precachePicture(
    ExactAssetPicture(SvgPicture.svgStringDecoderBuilder, 'assets/my_icon.svg'),
    null,
  );

您可以使用 PreCachePicture，它对我有用：

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

您需要在上一个屏幕小部件中执行此操作，例如在您的main中

Answer 2

precachePicture

已被弃用来缓存 SVG 图像，我们可以

SvgAssetLoader

作为替代方案。

void main() async {
  ImageUtils.svgPrecacheImage();
  runApp(const MyApp());
}

指定utils类中的所有资产图像。

 class ImageUtils {
    
      static const String imageHistory = 'assets/images/ic_history.svg';
      static const String imageShared = 'assets/images/ic_shared.svg';
      static const String imageMap = 'assets/images/ic_maps.svg';
    
    
     static void svgPrecacheImage() {

        const cacheSvgImages = [  /// Specify the all the svg image to cache 
          ImageUtils.imageHistory,
          ImageUtils.imageShared,
          ImageUtils.imageMap,
        ];
    
        for (String element in cacheSvgImages) {
          var loader = SvgAssetLoader(element);
          svg.cache
              .putIfAbsent(loader.cacheKey(null), () => loader.loadBytes(null));
        }

      }
    
    }