#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. даже если вы сможете, это будет не идеально, потому что это ресурс, вы можете удалить , отредактировать и добавить его обратно, а не изменять ресурс каждый раз при запуске приложения.