Flutter技巧：如何用Transform.rotate()旋转ClipOval但不旋转内部图片

你现在的代码是把ClipOval和里面的图片一起旋转了，要实现只转裁剪区域、图片保持正常方向且居中，用Stack把图片和裁剪层分开就行，具体代码如下：

修正后的代码 #

Stack(
  alignment: Alignment.center,
  children: [
    // 放置不旋转的图片，确保居中显示
    Image.network(
      "https://img.freepik.com/premium-vector/person-avatar-design_24877-38137.jpg?w=2000",
      fit: BoxFit.cover,
      width: 200,
      height: 300,
    ),
    // 单独旋转ClipOval作为遮罩，仅显示旋转椭圆范围内的图片部分
    Transform.rotate(
      angle: 1, // 1弧度约等于57度，需要精准45度可替换为π/4（即0.785）
      child: ClipOval(
        child: Container(
          width: 200,
          height: 300,
          color: Colors.white, // 用白色填充遮罩外区域，避免显示底层多余内容
        ),
      ),
    ),
  ],
)

实现原理 #

• Stack将图片层和裁剪遮罩层叠加，alignment: Alignment.center保证图片刚好处于裁剪区域的中心位置。
• 图片层放在底层，不添加旋转逻辑，保持原始显示方向。
• 上层仅对ClipOval容器应用旋转，通过白色容器作为遮罩，只露出旋转椭圆范围内的图片内容，从而实现裁剪区域旋转但图片不旋转的效果。

如果需要处理透明背景场景，可以改用ClipPath自定义旋转椭圆路径，不过上述方法足以覆盖大多数常规需求。

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