Flutter使⽤cached_image_network优化图⽚加载体验
⽬录
使⽤占位图
使⽤进度加载指⽰
效果
在 App 中会经常遇到需要从后台拉取图⽚的场景，这⼀⽅⾯会给服务器带来⽹络带宽消耗，另⼀⽅⾯加载图⽚的
等待过程也会影响⽤户体验。因此，往往会在 App 端对图⽚做缓存机制，以避免同⼀张图⽚反复发起请求。这个
时候cached_image_network就派上⽤场了
上⼀篇，我们使⽤了列表，其中列表中有从⽹络下载图⽚。直接使⽤ Flutter ⾃带的 Imagework 下载图⽚⼀是⽆法缓存，⼆是体验不够好。熟悉 iOS 的肯定知道 SDWebImage，即 Objective-C 上⽤得最⼴
泛的图⽚缓存开源组件。与 SDWebImage 类似，Flutter 的 cached_image_network 插件也实现了这样的功能。cached_image_network 使⽤⼗分简单，⾸先在pubspec.yaml 中添加依赖：
dependencies:
flutter:
sdk: flutter
# ...其他依赖
cached_network_image: ^3.0.0
之后在需要使⽤ cached_image_network 的地⽅引⼊源码：
import 'package:cached_network_image/cached_network_image.dart';
最后在需要加载⽹络图⽚的地⽅使⽤cached_image_network 替代原有的图⽚加载⽅式（如 Imagework）：CachedNetworkImage(imageUrl: "via.placeholder/350x150"),
以上是 cached_image_network 最简单的⽤法，当然为了⽤户体验更好，推荐是使⽤占位图或加载指⽰
器的⽅式提⽰⽤户图⽚正在加载。
使⽤占位图
CachedNetworkImage 提供了占位图和加载失败后的错误指⽰的⽅法⽤于静态指⽰。我们分别准备 image-default.png 和image-failed.png ⽂件表⽰默认占位图和加载失败后的占位图，然后⽤ CachedNetworkImage 构造⽅法的 placeholder 和errorWidget 来使⽤占位图，如下所⽰：
Widget _imageWrapper(String imageUrl) {
return SizedBox(
width: 150,
height: ITEM_HEIGHT,
child: CachedNetworkImage(
imageUrl: imageUrl,
flutter sdkplaceholder: (context, url) => Image.asset('images/image-default.png'),
errorWidget: (context, url, error) =>
Image.asset('images/image-failed.png'),
),
);
}
}
使⽤进度加载指⽰
也可以使⽤进度加载指⽰器来指⽰加载进度，加载进度指⽰⽀持原型进度和线型进度。这种对于⼤图预览时会更为常⽤，代码如下所⽰，其中LinearProgressIndicator是线型指⽰器，CircularProgressIndicator 是圆形指⽰器：
Widget _imageWrapper(String imageUrl) {
return SizedBox(
width: 150,
height: ITEM_HEIGHT,
child: CachedNetworkImage(
imageUrl: imageUrl,
progressIndicatorBuilder: (context, url, downloadProgress) =>
LinearProgressIndicator(value: downloadProgress.progress),
errorWidget: (context, url, error) =>
Image.asset('images/image-failed.png'),
),
);
}
效果
效果如下图所⽰，下拉刷新后，可以先看到占位图，然后逐渐过渡到加载成功的图⽚。如果修改链接为⼀个⾮法链接或资源不存在的链接，则会显⽰图⽚加载失败的占位图。这种体验相⽐空⽩没有任何指⽰的 Imagework好很多。
以上就是Flutter 使⽤cached_image_network优化图⽚加载体验的详细内容，更多关于Flutter ⽤cached_image_network优化图⽚加载的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。