是否可以在Flutter中以SVG格式重复图像(图案)?

eqqqjvef  于 2023-04-22  发布在  Flutter
关注(0)|答案(2)|浏览(112)

bounty还有2天到期,回答此问题可获得+50声望奖励。A.Sanchez.SD正在寻找规范答案

final kBackgroundImage = Image.asset(
  'assets/images/bg.png',
  repeat: ImageRepeat.repeat,
  height: double.infinity,
  width: double.infinity,
);

用SVG背景图像做这样的事情?

tgabmvqs

tgabmvqs1#

是的,通过使用BoxDecoration类的ImageRepeat属性,可以在Flutter中重复SVG格式的图像或图案。
下面是一个示例代码片段,展示了如何在Flutter中重复SVG图像:

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/pattern.svg'),
      fit: BoxFit.fill,
      repeat: ImageRepeat.repeat,
    ),
  ),
  child: // your child widget here,
),

注意,并非所有SVG图像都可以无缝重复,您可能需要调整图像的大小和长宽比,以达到所需的图案重复效果。

wj8zmpe1

wj8zmpe12#

Flutter不支持SVG格式,我看了几篇博客,发现它会导致性能问题。我自己用GridView和Flutter SVG包试了一下,有点滞后。所以我觉得使用PNG作为重复背景更好。

List<Widget> _svgImages(int number) {
    List<Widget> svg = [];
    for (int i = 0; i <= number; i++) {
      svg.add(SvgPicture.asset(
        'assets/plane.svg',
        color: Colors.green,
      ));
    }
    return svg;
  }

GridView(
    gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 20,
        childAspectRatio: 1,
        crossAxisSpacing: 0,
        mainAxisSpacing: 0,
        ),
    children: _svgImages(200),
)

相关问题