CachedNetworkImage 颤动

CachedNetworkImage 是一个Flutter中的网络图片加载库，它可以缓存网络图片并快速加载已经缓存的图片。而 颤动 是该库出现了的问题之一，下面我们来介绍一下这个问题以及如何解决它。

问题描述

使用 CachedNetworkImage 加载网络图片时，有时图片会出现颤动现象，也就是说图片在加载完成之前会频繁出现一闪一闪的情况。

问题原因

该问题的根本原因是因为在图片加载完成之前，CachedNetworkImage 会不断地进行图片尺寸的更新，而这种更新操作会导致图片视觉上的颤动现象。

解决方法

目前有两种解决该问题的方法：

1. 使用cacheManager获取图片

使用 cacheManager 获取图片可以有效地解决该问题。cacheManager 是一个基于文件缓存的库，它可以帮助我们快速地将网络图片缓存到本地，并在需要的时候直接从缓存中获取图片。

import 'package:flutter_cache_manager/flutter_cache_manager.dart';

CachedNetworkImage(
  imageUrl: 'https://picsum.photos/250?image=9',
  cacheManager: CacheManager(),
);

2. 将图片尺寸设置为固定值

另一种解决方法是通过将图片的尺寸设置为固定值来避免更新操作。这样可以让图片在加载完成之前保持不变，从而避免出现颤动现象。

CachedNetworkImage(
  imageUrl: 'https://picsum.photos/250?image=9',
  height: 200, // 设置图片高度为固定值
);

总结

本文介绍了 Flutter 中网络图片加载库 CachedNetworkImage 出现颤动的问题以及两种解决方法。使用 cacheManager 获取图片可以避免图片视觉上的颤动现象，并且可以提高图片加载速度。在某些情况下，也可以通过将图片尺寸设置为固定值来解决该问题。