时间戳

首页 > 解决方案 > Flutter BlurhHash 通过 CachedNetworkImage 加载时闪烁

flutter - Flutter BlurhHash 通过 CachedNetworkImage 加载时闪烁

问题描述

我正在尝试将 BlurHash 与 CachedNetworkImage 结合起来，以便在从 Cloud Firestore 加载图像时提供良好的过渡。
问题在于，在过渡到加载的图像开始之前，大多数时间 BlurHash 会闪烁。
我将其范围缩小到它闪烁从模型对象加载的哈希值，从 Firestore 返回。如果我对模糊哈希进行硬编码，则不会发生闪烁。

Widget get _networkImage {
    final Duration fadeDuration = Duration(milliseconds: hasBlurhHash ? 500 : 0);
    return CachedNetworkImage(
      imageUrl: imageURL!,
      fit: fit,
      width: width,
      height: height,
      fadeInDuration: fadeDuration,
      fadeOutDuration: fadeDuration,
      placeholder: (context, __) => hasBlurhHash ? _blurHash : _loader(context),
      errorWidget: (context, url, error) => Image(image: AssetImage("assets/img/aboutus.png")),
    );
  }

  Widget get _blurHash => BlurHash(hash: blurHash!, color: Colors.white);

  Widget _loader(BuildContext context) => ConstrainedBox(
        constraints: BoxConstraints(maxHeight: 48.h, maxWidth: 48.h),
        child: Center(
          child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
            strokeWidth: 4,
          ),
        ),
      );

问题是 blurHash 数据没有改变，所以我不确定它为什么会发生和/或如何解决它。

有人有任何线索吗？

标签： flutter

解决方案

推荐阅读