Flutter中如何裁剪超出容器的旋转图片及图标？

一、实现图片裁剪需求 #

要解决图片旋转后超出容器不显示、正常位置超出容器裁剪的问题，用Flutter的clipBehavior属性配合Image的fit属性就能搞定：

1. 裁剪旋转后超出容器的图片 #

给承载图片的Container添加clipBehavior: Clip.hardEdge（如果需要抗锯齿效果，可换成Clip.antiAlias，但性能略低），容器内所有超出边界的内容都会被自动裁剪。

2. 正常位置下裁剪超出容器的图片 #

给Image组件设置fit: BoxFit.cover，图片会按容器尺寸填充，自动裁剪超出部分；这个属性能保持图片比例并居中裁剪，适配多数场景。

修改后的代码片段：

Container(
  color: Colors.blue,
  height: 100,
  // 添加裁剪行为
  clipBehavior: Clip.hardEdge,
  child: Transform.translate(
      offset: const Offset(0.0, 15.0),
      child: Transform.rotate(
          angle: -3.14 / 12.0,
          child: Image.asset(
            'assets/images/map.png',
            height: 300,
            // 设置fit属性处理正常位置的裁剪
            fit: BoxFit.cover,
          ))),
),

二、Icon的裁剪处理 #

完全可以对Icon执行同样的裁剪操作，方法和图片一致：
如果Icon本身尺寸超出容器，或者经过Transform变换后超出，只需把Icon放在设置了clipBehavior的容器内，或者用ClipRect包裹即可。

示例代码：

Container(
  width: 50,
  height: 50,
  color: Colors.grey,
  clipBehavior: Clip.hardEdge,
  child: Transform.rotate(
    angle: 3.14 / 4,
    child: const Icon(Icons.star, size: 80),
  ),
)

补充说明 #

• clipBehavior是Container的内置属性，比单独嵌套ClipRect更简洁；
• 除了Clip.hardEdge，还有Clip.antiAlias（适合圆形/弧形裁剪，抗锯齿）、Clip.antiAliasWithSaveLayer（复杂场景使用），可按需选择；
• 如果需要圆角裁剪，用ClipRRect组件替代ClipRect，配合borderRadius属性实现即可。

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