如何在flutter中更改svg图像的大小？

Question

我曾经 flutter_svg: ^0.18.0在我的项目中使用 svg 图像。但我无法找到适当的方法来改变它的大小。

这是我的代码

body: SafeArea(
    child: Center(
      child: SvgPicture.asset('assets/images/morelights.svg'),
    ),
  ),

Answer 1

关键提示是使用fit这样的属性：

SvgPicture.asset(
      'assets/svg/notification.svg',
      height: 5, width: 5,
      fit: BoxFit.scaleDown
        )

Answer 2

我找到了一个解决方案：）

脚步

1. 将 svg 图标包裹在容器内。（容器应该是一个子部件）
2. 将容器的颜色设置为透明。
3. 更改容器的大小。（Svg 图标继承父窗口小部件的大小。）

注意：您也可以使用 IconButton 小部件。就我而言，容器效果更好:)

例子

Answer 3

我偶然找到了解决方案。用Container小部件包裹SvgPicture并添加对齐方式。

这样您就可以自由更改SvgPicture 的宽度和高度。

Container(
  height: 100,
  width: 100,
  alignment: Alignment.center, // <---- The magic
  padding: const EdgeInsets.all(12),
  child: SvgPicture.asset(
     'assets/icons/svg-image.svg',
     semanticsLabel: 'Image',
     height: 50,
     width: 50,
  ),
),

希望这适用于您的情况

Answer 4

您可以使用 IconButton 包装您的 SvgPicture 小部件

IconButton(
  onPressed: (){},
  icon: SvgPicture.asset(
      icDate,
      height: 24,
      width: 24,
  ),
),