Flutter实现圆角图片、Flutter实现图片圆角

在Flutter中实现圆角图片，可以通过多种方式来完成。下面是一些常用的方法：

Flutter 使用使用ClipRRect 实现圆角图片、图片圆角 方法1

ClipRRect 是一个非常简单的解决方案，它可以用来裁剪其子组件为圆角矩形。对于显示一张带有圆角的图片，你可以这样做：

ClipRRect(
  borderRadius: BorderRadius.circular(10.0), // 圆角的半径
  child: Image.network(
    'https://example.com/image.jpg', // 图片的URL
    width: 200, // 图片宽度
    height: 200, // 图片高度
    fit: BoxFit.cover, // 图片填充模式
  ),
)

方法2：Flutter 使用Container和decoration实现图片圆角

你也可以通过Container widget 和它的 decoration 属性来创建一个带圆角的图片容器：

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    image: DecorationImage(
      image: NetworkImage('https://example.com/image.jpg'),
      fit: BoxFit.cover,
    ),
  ),
)

方法3：使用CachedNetworkImage插件现图片圆角

如果你需要加载网络图片并且想要缓存它们，可以考虑使用 cached_network_image 插件，它也支持圆角：

CachedNetworkImage(
  imageUrl: "https://example.com/image.jpg",
  imageBuilder: (context, imageProvider) => Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10.0),
      image: DecorationImage(
        image: imageProvider,
        fit: BoxFit.cover,
      ),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

方法4：Flutter 圆形图片（Circle Avatar）

如果你想要的是一个完全圆形的图片，比如用户头像，那么可以使用 CircleAvatar widget 或者是将 ClipOval 或 ClipPath 与 BoxDecoration 结合使用。

使用 CircleAvatar:

CircleAvatar(
  radius: 50, // 半径大小
  backgroundImage: NetworkImage('https://example.com/image.jpg'),
)

或者使用 ClipOval:

ClipOval(
  child: Image.network(
    'https://example.com/image.jpg',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
)