使用CachedNetworkImage搭配BlendMask时初始不生效问题求助

问题根源 #

图片加载完成后，BlendMask未收到重绘通知，导致UI没有即时更新；滚动操作触发页面重绘后，效果才正常渲染。

修复方案 #

方案1：通过StatefulWidget手动触发重绘 #

将组件改为StatefulWidget，在图片加载完成后调用setState()强制重绘：

class _BlendMaskImageState extends State<BlendMaskImage> {
  bool _imageLoaded = false;

  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
      fit: BoxFit.fitWidth,
      imageUrl: widget.url,
      height: 190,
      width: 200,
      imageBuilder: (context, imageProvider) {
        if (!_imageLoaded) {
          WidgetsBinding.instance.addPostFrameCallback((_) {
            setState(() => _imageLoaded = true);
          });
        }
        return BlendMask(
          blendMode: BlendMode.multiply,
          child: Image(
            image: imageProvider,
            fit: BoxFit.fitWidth,
            colorBlendMode: BlendMode.multiply,
          ),
        );
      },
      placeholder: (context, url) => const SizedBox(height: 190, width: 200),
    );
  }
}

class BlendMaskImage extends StatefulWidget {
  final String url;
  const BlendMaskImage({super.key, required this.url});

  @override
  State<BlendMaskImage> createState() => _BlendMaskImageState();
}

方案2：用ValueListenableBuilder监听加载状态 #

用ValueNotifier配合ValueListenableBuilder自动触发重绘，无需StatefulWidget：

Widget buildBlendMaskImage(String url) {
  final ValueNotifier<bool> _isLoaded = ValueNotifier(false);

  return ValueListenableBuilder(
    valueListenable: _isLoaded,
    builder: (context, loaded, child) {
      return CachedNetworkImage(
        fit: BoxFit.fitWidth,
        imageUrl: url,
        height: 190,
        width: 200,
        imageBuilder: (context, imageProvider) {
          if (!loaded) _isLoaded.value = true;
          return BlendMask(
            blendMode: BlendMode.multiply,
            child: Image(
              image: imageProvider,
              fit: BoxFit.fitWidth,
              colorBlendMode: BlendMode.multiply,
            ),
          );
        },
      );
    },
  );
}

方案3：清理重复的混合模式配置 #

你当前代码中Image的colorBlendMode和BlendMask的blendMode均为multiply，重复叠加可能导致渲染异常。尝试移除Image的colorBlendMode：

imageBuilder: (context, imageProvider) {
  return BlendMask(
      blendMode: BlendMode.multiply,
      child: Image(
         image: imageProvider,
         fit: BoxFit.fitWidth,
      ),
  );
}

总结 #

优先通过重绘触发让BlendMask即时渲染，同时检查是否存在重复混合模式导致的异常，即可解决加载后效果不显示的问题。

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