Flutter中如何让FadeInImage适配圆角父容器实现圆角显示？

Container默认的裁剪行为是Clip.none，仅给Container的BoxDecoration配置borderRadius不会自动裁剪超出容器边界的子组件，因此内部的FadeInImage会按原始矩形渲染，覆盖圆角区域，最终显示为直角效果。

方案1：最小改动，给Container添加裁剪属性 #

直接给Container增加clipBehavior参数，指定抗锯齿裁剪模式即可，不需要修改原有结构：

return Container(
  width: 325,
  height: 245,
  // 新增裁剪配置，超出容器边界的内容会按圆角自动裁剪
  clipBehavior: Clip.antiAlias,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
  ),
  child: FadeInImage.assetNetwork(
    placeholder: AppAssets.eventPlaceholder,
    image: tempPhoto,
    fit: BoxFit.cover,
  ),
);

注意：Flutter中Container的clipBehavior默认值为Clip.none，不会主动裁剪子组件溢出内容，这是圆角场景下的高频误区。

方案2：使用ClipRRect直接裁剪子组件 #

如果不想修改Container的属性，也可以用专门的圆角裁剪组件包裹图片，圆角值和Container保持一致即可：

return Container(
  width: 325,
  height: 245,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: FadeInImage.assetNetwork(
      placeholder: AppAssets.eventPlaceholder,
      image: tempPhoto,
      fit: BoxFit.cover,
    ),
  ),
);

方案3：无额外装饰时直接用ClipRRect作为外层 #

如果容器不需要配置背景色、边框等其他装饰效果，可以直接用ClipRRect作为外层容器，代码更简洁：

return ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: FadeInImage.assetNetwork(
    width: 325,
    height: 245,
    placeholder: AppAssets.eventPlaceholder,
    image: tempPhoto,
    fit: BoxFit.cover,
  ),
);

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