加载颤振时消除图像中的白色闪烁

Posted 2023-05-07

【中文标题】加载颤振时消除图像中的白色闪烁

【英文标题】：Remove White Flicker in Image when loading flutter

【发布时间】：2021-12-24 00:58:20

【问题描述】：

我正在构建一个在网格视图中显示数百张图像的应用。在网格图块中，我展示了低质量的图像。当我们按下图像时，我显示了完整质量的图像，同时，我将低质量的图像显示为占位符。我正在使用CachedNetworkImage 包。这里的问题是，当加载完整质量的图像时，会出现一些白色闪烁，如here 所示。我想删除那个flickr。有什么办法可以去掉那个吗？

这是我的代码。

 Widget cachedImage(imageUrl) 
    return CachedNetworkImage(
      imageUrl: imageUrl,
      imageBuilder: (context, imageProvider) => Container(
            decoration: BoxDecoration(
              color: Theme.of(context).shadowColor,
                borderRadius: BorderRadius.circular(10),
                boxShadow: <BoxShadow>[
                  BoxShadow(
                      color: Theme.of(context).shadowColor,
                      blurRadius: 2,
                      offset: Offset(2, 2))
                ],
                image: DecorationImage(
                    image: imageProvider,
                    fit: BoxFit.cover)),
          ),
      placeholder: (context, url) => LoadingWidget1(),
      errorWidget: (context, url, error) => Center(child: Icon(Icons.error)),
    );
  

//code for thumbnail image
Hero(
    tag: 'category$index',
    child: cachedImage(d['thumbnail url'])
),

//Code for FullQuality Preview

....
child: CachedNetworkImage(
                placeholderFadeInDuration: Duration(microseconds: 0),
                useOldImageOnUrlChange: true,
                imageUrl: imageUrl,
                imageBuilder: (context, imageProvider) => Container(
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: imageProvider, fit: BoxFit.cover)),
                ),

                placeholder: (context, url) => Stack(
                  children: [

                    CachedNetworkImage(
                      imageUrl: thumbUrl,
                      imageBuilder: (context, imageProvider) => Container(
                      decoration: BoxDecoration(
                          image: DecorationImage(
                              image: imageProvider, fit: BoxFit.cover)),

                    ),

                  ),

【问题讨论】：

显示闪烁的链接正在返回 404。

我更新了链接。

尝试将淡入淡出的持续时间增加到一秒左右，看看问题是否变得更加明显。可能是一百万的褪色看起来很奇怪。

我已经试过了。它不做任何改变。即使我不想隐藏它，我可以在图像上方显示圆形进度指示器一秒钟吗？

【参考方案1】：

CachedNetworkImage 中有 2 个淡入淡出持续时间，默认值为非 null（顺便说一下，placeholderFadeInDuration 为 null），您可以尝试将 fadeOutDuration 和 fadeInDuration 都归零：

【讨论】：

我尝试了您的解决方案。尽管如此，它仍然没有解决。没有任何改变

另一个嫌疑人是过渡动画。不确定您是如何实现屏幕切换的，但您可能需要检查路线动画 (docs.flutter.dev/cookbook/animation/page-route-animation) 或任何其他在单击卡片后导航到特定壁纸的自定义代码。

非常感谢。正如你所说，我通过调整持续时间来解决。