有没有更简便的调整SVG大小的方法?Flutter中将SVG高度减半问题求助
可行的实现方案如下:
- 方案1:父容器加裁剪规则,保留底部波浪裁掉上半部分
你之前修改Container尺寸不生效的核心原因是默认Container不会裁剪超出边界的子组件,且SvgPicture默认适配规则不会主动撑满父容器,修改代码如下:
Container( // 高度直接设为原直径的一半,宽度不变 height: bubbleDiameter.toDouble() / 2, width: bubbleDiameter.toDouble(), // 开启超出内容裁剪 clipBehavior: Clip.hardEdge, // 对齐到底部,保证裁剪后保留的是下半部分的波浪图案 alignment: Alignment.bottomCenter, child: SvgPicture.asset( assetName, // 让SVG撑满当前容器尺寸 fit: BoxFit.cover, ), )
- 方案2:直接给SVG组件指定尺寸
如果不需要裁剪,仅需把SVG整体缩小一半,不需要修改父容器参数,直接给SvgPicture设置尺寸即可:
SvgPicture.asset( assetName, height: bubbleDiameter.toDouble() / 2, width: bubbleDiameter.toDouble(), alignment: Alignment.bottomCenter, )
- 方案3:修改SVG源文件配置
如果希望SVG导入后默认就是一半高度的状态,直接打开SVG源文件,修改viewBox属性,把高度范围调整为仅保留下半部分即可,比如原viewBox为0 0 200 400,就修改为0 200 200 200,这样导入后本身就只有下半部分的波浪图案。
内容的提问来源于stack exchange,提问作者Adam Ocasio
相关产品推荐
相关产品推荐

