Есть ли более простой способ настроить размер SVG?

#flutter #dart #flutter-layout

Вопрос:

Я хочу разрезать изображение SVG пополам. SVG-это более светлая волна в нижней части круга. В настоящее время он слишком высок, и мне нужно уменьшить размер примерно вдвое. Я поместил SVG в собственный контейнер, но изменение размера контейнера не совсем соответствует изменению размера изображения так, как я ожидал. Любое предложение приветствуется.

 return Container(  decoration: bubbleBoxDecoration,  height: bubbleDiameter.toDouble(),  width: bubbleDiameter.toDouble(),  child: Stack(  children: [  Center(  child: Column(  mainAxisAlignment: MainAxisAlignment.center,  crossAxisAlignment: CrossAxisAlignment.center,  children: lt;Widgetgt;[  Text(  'Upper Body',  style: labelTextStyle,  ),  Text(  '45',  style: weightTextStyle,  ),  Text(  'lbs',  style: unitTextStyle,  ),  ],  ),  ),  Container(  height: bubbleDiameter.toDouble(),  width: bubbleDiameter.toDouble(),  child: SvgPicture.asset(  assetName,  alignment: Alignment.bottomCenter,  ),  ),  ],  ),  );  } }  

Пример изображения

Комментарии:

1. ты пробовал: SvgPicture.asset( assetName, alignment: Alignment.bottomCenter, width: 100, height: 100 ),

Ответ №1:

Ключевым здесь является fit параметр. Кроме того, поскольку вы хотите отрезать нижнюю часть и увидеть верхнюю, используйте Alignment.topCenter .

 Container(  height: bubbleDiameter.toDouble() / 2,  width: bubbleDiameter.toDouble(),  child: SvgPicture.asset(  assetName,  fit: BoxFit.fitWidth,  alignment: Alignment.topCenter,  ), ),  

Ответ №2:

Вы можете обмануть пользовательский интерфейс во время использования Stack и изменить размер изображения так, как вы хотите. Вам нужно изменить размер изображения и правильно выровнять его. Единственная причина, по которой ваш фрагмент кода не отражает размер, потому Stack что ребенку требуется позиционный виджет, такой как Positioned / Align , чтобы отражать пользовательский размер.

 Positioned(  bottom: -100,// bubbleDiameter.toDouble() the way you like to align  child: SvgPicture.asset(  assetName,  height: bubbleDiameter.toDouble() * 2,  width: bubbleDiameter.toDouble() *2,  alignment: Alignment.bottomCenter,  ),  ),  

Ответ №3:

Вы не можете изменить изображение ресурса в flutter. даже если вы сможете, это будет не идеально, потому что это ресурс, вы можете удалить , отредактировать и добавить его обратно, а не изменять ресурс каждый раз при запуске приложения.