使用Transform.scale放大Image时，如何保持父Widget尺寸不变？

问题背景 #

现有一个尺寸固定为400×500的SizedBox，其子组件是convertImage()方法返回的带缩放效果的图片。当前用Transform.scale(scale:1.2)放大Image.memory后，父容器SizedBox的尺寸也被撑大了1.2倍，需求是仅放大图片，同时保持SizedBox的400×500尺寸不变。

原代码示例 #

父容器代码：

SizedBox(
  height: 400,
  width: 500,
  child: convertImage(),
);

图片转换方法：

Widget convertImage() {
  return Transform.scale(
    scale: 1.2,
    child: Image.memory(_image, fit: BoxFit.cover),
  );
}

解决方案 #

可以实现，只需对convertImage方法做两处修改：

• 给Transform.scale添加alignment: Alignment.center参数
• 用ClipRect包裹Transform.scale，裁剪溢出部分

修改后的convertImage方法：

Widget convertImage() {
  return ClipRect(
    child: Transform.scale(
      scale: 1.2,
      alignment: Alignment.center, // 核心：设置缩放原点为中心
      child: Image.memory(_image, fit: BoxFit.cover),
    ),
  );
}

父容器代码无需改动。

原理说明 #

• Transform.scale默认对齐方式是Alignment.centerLeft，缩放后组件的布局边界会被拉伸，导致父容器跟着变大。设置为Alignment.center后，图片以自身中心为原点放大，不会影响父容器的布局尺寸。
• ClipRect会裁剪掉图片放大后超出SizedBox范围的部分，避免图片溢出到父容器外部。

内容的提问来源于stack exchange，提问作者sub