如何让Image.network在带圆角的Container中实现图片适配？

你当前的代码没有给Container设置圆角，而且即使添加了圆角，默认也不会裁剪内部的Image组件，会导致图片超出圆角范围。这里提供两种可行的解决方法：

方法一：给Container添加裁剪行为 #

给Container设置borderRadius的同时，开启clipBehavior属性，让容器对子元素进行裁剪，这样图片就能适配圆角显示：

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(16), // 自定义圆角大小
  ),
  clipBehavior: Clip.hardEdge, // 开启裁剪，使子元素适配容器圆角
  child: Image.network(
    snapshot.data!,
    fit: BoxFit.cover, // 保持图片比例并填满容器
  ),
)

方法二：使用ClipRRect包裹Image组件 #

通过ClipRRect直接对Image进行圆角裁剪，再放入Container中，这种方式更灵活，也能达到同样效果：

Container(
  width: 100,
  height: 100,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(16),
    child: Image.network(
      snapshot.data!,
      fit: BoxFit.cover,
    ),
  ),
)

补充说明 #

• BoxFit.cover会让图片保持原有比例的同时填满容器，超出容器的部分会被裁剪，避免图片拉伸变形。
• 你可以根据需求调整BorderRadius.circular()的参数值，改变圆角的弧度大小。

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