Flutter中如何为Container的CachedNetworkImageProvider设置占位图与错误图

方案1：调整组件结构（优先推荐，实现更简单） #

无需强制使用DecorationImage实现样式效果，保留原有Container的边框、圆角配置，新增clipBehavior属性裁切内容，直接将CachedNetworkImage作为子组件即可使用内置的占位、错误回调，最终显示效果和原有代码完全一致，示例代码如下：

Container(
  width: 100.0,
  height: 100.0,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(
      color: Colors.black.withOpacity(0.1),
      width: 1.0,
    ),
    borderRadius: BorderRadius.circular(8.0),
  ),
  clipBehavior: Clip.antiAlias, // 保证子图片按父容器圆角裁切
  child: CachedNetworkImage(
    imageUrl: _photoPath,
    fit: BoxFit.cover,
    // 自定义加载占位图
    placeholder: (context, url) => const Center(child: CircularProgressIndicator()),
    // 自定义加载失败错误图
    errorWidget: (context, url, error) => const Center(child: Icon(Icons.broken_image, color: Colors.grey)),
  ),
)

方案2：保留DecorationImage（适配必须使用图片装饰的特殊场景） #

如果业务逻辑必须依赖DecorationImage实现，可以手动监听CachedNetworkImageProvider的加载状态，根据状态切换显示内容，实现步骤如下：

1. 在页面State中定义图片加载状态与监听逻辑

// 定义图片加载状态枚举
enum ImageLoadStatus { loading, success, error }
final ValueNotifier<ImageLoadStatus> _imageLoadStatus = ValueNotifier(ImageLoadStatus.loading);

@override
void initState() {
  super.initState();
  // 监听图片加载结果
  final imageProvider = CachedNetworkImageProvider(_photoPath);
  imageProvider.resolve(const ImageConfiguration()).addListener(
    ImageStreamListener(
      (image, syncLoad) => _imageLoadStatus.value = ImageLoadStatus.success,
      onError: (e, trace) => _imageLoadStatus.value = ImageLoadStatus.error,
    ),
  );
}

2. 在build方法中根据状态渲染对应组件

ValueListenableBuilder<ImageLoadStatus>(
  valueListenable: _imageLoadStatus,
  builder: (context, status, child) {
    final baseDecoration = BoxDecoration(
      color: Colors.white,
      border: Border.all(
        color: Colors.black.withOpacity(0.1),
        width: 1.0,
      ),
      borderRadius: BorderRadius.circular(8.0),
    );
    // 加载中显示占位
    if (status == ImageLoadStatus.loading) {
      return Container(
        width: 100.0,
        height: 100.0,
        decoration: baseDecoration,
        child: const Center(child: CircularProgressIndicator()),
      );
    }
    // 加载失败显示错误图
    if (status == ImageLoadStatus.error) {
      return Container(
        width: 100.0,
        height: 100.0,
        decoration: baseDecoration,
        child: const Center(child: Icon(Icons.broken_image, color: Colors.grey)),
      );
    }
    // 加载成功返回原有带图片装饰的容器
    return Container(
      width: 100.0,
      height: 100.0,
      decoration: baseDecoration.copyWith(
        image: DecorationImage(
          fit: BoxFit.cover,
          image: CachedNetworkImageProvider(_photoPath),
        ),
      ),
    );
  },
)

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