Flutter中CachedNetworkImageProvider的errorListener使用方法

CachedNetworkImageProvider的errorListener仅负责抛出加载错误事件，不会自动替换渲染内容，你需要通过局部状态标记加载结果，动态切换Ink.image使用的图片provider即可，全程不需要放弃使用CachedNetworkImageProvider，完全符合项目限制要求。

实现步骤 #

• 为使用该组件的State类新增_imageLoadFailed布尔状态，初始值为false，用于标记当前图片是否加载失败
• 在errorListener回调中触发状态更新，将失败标记置为true
• 渲染时根据状态判断传入Ink.image的image参数：加载失败时传入错误图标对应的图片provider（本地资源、内存图片都可），加载正常时传入原CachedNetworkImageProvider
• 如果是在列表场景使用，需要将每个列表项抽为独立的StatefulWidget，避免多个列表项共用状态导致显示错乱

可直接复用的修正代码 #

// 列表场景下请将单个列表项抽离为独立StatefulWidget，避免滚动复用时状态混乱
class AgentAvatarItem extends StatefulWidget {
  final Agent agent;
  const AgentAvatarItem({super.key, required this.agent});

  @override
  State<AgentAvatarItem> createState() => _AgentAvatarItemState();
}

class _AgentAvatarItemState extends State<AgentAvatarItem> {
  bool _imageLoadFailed = false;

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: const BorderRadius.all(Radius.circular(9)),
      child: Ink.image(
        image: _imageLoadFailed
            // 替换为你项目中实际的错误图标资源路径
            ? const AssetImage('assets/icons/img_load_error.png')
            : CachedNetworkImageProvider(
                widget.agent.profilePicture,
                errorListener: (e) {
                  // 延后一帧更新状态，避免和当前帧渲染冲突报错
                  WidgetsBinding.instance.addPostFrameCallback((_) {
                    if (mounted) {
                      setState(() => _imageLoadFailed = true);
                    }
                  });
                },
              ),
        fit: BoxFit.cover,
        child: InkWell(
          highlightColor: Colors.blue.withOpacity(0.4),
          splashColor: Colors.transparent,
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => AgentProfileScreen(agent: widget.agent),
              ),
            );
          },
        ),
      ),
    );
  }
}

额外说明 #

• 错误图标不限制资源类型：除了本地Asset图片，你也可以用MemoryImage传入图标字节、或者ExactAssetImage等其他ImageProvider实现
• 如果需要处理图片url动态变化的场景，可以在didUpdateWidget生命周期里重置_imageLoadFailed为false，保证新地址的图片可以正常发起加载
• 不要在errorListener回调中执行除了状态标记之外的耗时逻辑，避免阻塞图片加载流程

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