Flutter中如何添加与图片布局形状匹配的进度指示器

你可以通过以下两种方式让进度指示器和图片的圆角布局保持一致：

方法一：给占位符套上相同圆角的ClipRRect #

直接把CircularProgressIndicator用ClipRRect包裹，设置和外层图片容器完全一致的圆角半径，进度条就会被裁剪成和图片相同的圆角形状：

ClipRRect(
  borderRadius: BorderRadius.circular(8.r),
  child: CachedNetworkImage(
    fit: BoxFit.cover,
    alignment: Alignment.center,
    width: 78.w,
    height: 78.h,
    imageUrl: controller.userProductsList[i].product?.image ?? "",
    placeholder: (context, url) => ClipRRect(
      borderRadius: BorderRadius.circular(8.r),
      child: const CircularProgressIndicator(),
    ),
  ),
)

方法二：用带圆角的容器包裹进度指示器 #

先创建一个和图片尺寸、圆角完全匹配的容器，再把进度指示器居中放在容器内，这样既保证形状匹配，还能让进度条在占位区域里居中显示：

ClipRRect(
  borderRadius: BorderRadius.circular(8.r),
  child: CachedNetworkImage(
    fit: BoxFit.cover,
    alignment: Alignment.center,
    width: 78.w,
    height: 78.h,
    imageUrl: controller.userProductsList[i].product?.image ?? "",
    placeholder: (context, url) => Container(
      width: 78.w,
      height: 78.h,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.r),
      ),
      child: const Center(
        child: CircularProgressIndicator(),
      ),
    ),
  ),
)

注意：如果你的8.r是依赖flutter_screenutil这类适配库生成的，要确保占位符里的圆角数值和外层完全一致，才能保证形状完全匹配。

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