Flutter中SlideTransition内大图片被裁剪的问题解决咨询

问题原因 #

使用SlideTransition结合StackFit.passthrough时，父容器的严格约束会限制旋转后图片的显示空间，再加上BoxFit.cover的填充逻辑，导致图片超出部分被裁剪。

解决方案 #

方案1：保证图片完整显示

调整Stack约束、图片fit属性并添加旋转对齐：

Container(
  color: Colors.yellow,
  width: 300,
  height: 400,
  child: Stack(
    fit: StackFit.loose, // 取消强制继承父容器约束
    children: [
      SlideTransition(
        position: _offsetAnimation,
        child: Transform.rotate(
          angle: pi / 4,
          alignment: Alignment.center, // 旋转时居中对齐
          child: Image.asset(
            'assets/TOD10N_v.png',
            fit: BoxFit.contain, // 完整显示图片，不裁剪
          ),
        ),
      ),
    ],
  ),
)

方案2：图片覆盖容器且不裁剪

如果需要图片铺满父容器（旋转后仍覆盖），先计算父容器对角线长度，设置为图片尺寸，确保旋转后能完全覆盖容器：

// 计算父容器对角线长度
final double diagonal = sqrt(300 * 300 + 400 * 400);

Container(
  color: Colors.yellow,
  width: 300,
  height: 400,
  child: Stack(
    fit: StackFit.passthrough,
    children: [
      SlideTransition(
        position: _offsetAnimation,
        child: Transform.rotate(
          angle: pi / 4,
          alignment: Alignment.center,
          child: Image.asset(
            'assets/TOD10N_v.png',
            width: diagonal,
            height: diagonal,
            fit: BoxFit.cover,
          ),
        ),
      ),
    ],
  ),
)

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