Flutter - 如何正确显示组合的 SVG 图像

Question

我想在 Flutter 中显示合成的 SVG 图像，我目前正在使用 flutter_svg 库。

我的图片由不同的图层组成，可以使用应用程序的 GUI 组合在一起（创建头像）。

原则上，它与 SVGPicture 的 stack 一起工作得很好，但是在加载时，会出现一些问题，即某些 SVG 显示得比其他 SVG 稍晚，并且图形在这么短的时间内看起来就坏了 - 例如，化身的上半身没有加载但身体的其余部分 -> 化身中间有一个洞......

只有当所有部分都加载并可以显示时，有没有办法显示来自 SVGPictures 的合成？理想情况下，也应该显示一个假人这么长时间。

Answer 1

层数较多的SVG在加载时肯定会造成一些延迟，因此如果您想顺利加载它们，可以尝试预加载SVG。

final svg = SvgPicture.asset('assets/vector.svg');
final svgAnother = SvgPicture.asset('assets/vector.svg');

@override
Widget build(BuildContext context) {
  return Stack(
    children:[
      svg, // Load preloaded svg smoothly
      svgAnother,
    ],
  );
}