我不知道如何使用svg图片设置容器的背景图像!我试着设置图像作为背景,但它不工作,该方法与资产图像或在线图像,但不成功的工作与svg图片,我使用svg.picture。我是菜鸟!
qxsslcnc1#
您可以使用flutter_svg包来显示svg图像。我建议你使用Stack将svg图像放在后面,将你的小部件放在前面,而不是将它用作背景图像。示例
Stack
Widget build(BuildContext context) { return Scaffold( body: Stack( children: <Widget>[ SvgPicture.asset( 'assets/background.svg', alignment: Alignment.center, width: 200, height: 200, ), Container( child: << Your Widget >>, ), ], ), ); }
bttbmeg02#
您可以使用SVG作为Container's child,或者如果您只需要作为背景,则使用Stack:
Container's child
Column( children: [ //with Stack Stack( alignment: Alignment.center, children: [ SvgPicture.network("https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg",), Container( height: 200,width: 200, color: Colors.yellow.shade200, alignment: Alignment.center, child: const Text("Hello! World"), ) ], ), //with Container Container( height: 250, margin: const EdgeInsets.all(15.0), padding: const EdgeInsets.all(15.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), color: Colors.yellow.shade200, ), child: SvgPicture.network("https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg",), ), ], ),
ua4mk5z43#
要在Flutter中使用SVG作为容器的背景,您可以使用DecoratedBox沿着SvgPicture.asset小部件。下面是一个例子:
DecoratedBox
SvgPicture.asset
import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Container( decoration: BoxDecoration( image: DecorationImage( image: SvgPicture.asset( 'assets/images/background.svg', fit: BoxFit.cover, ).pictureProvider.toImage(100,100), //Example sizes fit: BoxFit.cover, ), ), child: Center( child: Text( 'Hello, world!', style: TextStyle( fontSize: 32.0, color: Colors.white, ), ), ), ), ); } }
我还没试过,不知道能不能用。如果你有任何错误,请告诉我!
9jyewag04#
我正在努力解决您的问题:验证码:
Container( decoration: BoxDecoration( image: DecorationImage( image: SvgPicture.asset( 'assets/images/background.svg', fit: BoxFit.cover, ).pictureProvider, fit: BoxFit.cover, ), ), child: Text(""); );
toiithl65#
请使用svg_provider包。您可能需要将flutter_svg version设置为^1.0.1才能使其工作。
svg_provider
return Container( height: double.infinity, width: double.infinity, decoration: const BoxDecoration( image: DecorationImage( image: svg_provider.Svg(svgPath), fit: BoxFit.none), ), );
5条答案
按热度按时间qxsslcnc1#
您可以使用flutter_svg包来显示svg图像。
我建议你使用
Stack
将svg图像放在后面,将你的小部件放在前面,而不是将它用作背景图像。示例
bttbmeg02#
您可以使用SVG作为
Container's child
,或者如果您只需要作为背景,则使用Stack
:ua4mk5z43#
要在Flutter中使用SVG作为容器的背景,您可以使用
DecoratedBox
沿着SvgPicture.asset
小部件。下面是一个例子:
我还没试过,不知道能不能用。如果你有任何错误,请告诉我!
9jyewag04#
我正在努力解决您的问题:
验证码:
toiithl65#
请使用
svg_provider
包。您可能需要将flutter_svg version设置为^1.0.1才能使其工作。