Flutter 使用cached_image_network优化图片加载体验
在 App 中会经常遇到需要从后台拉取图片的场景,这一方面会给服务器带来网络带宽消耗,另一方面加载图片的等待过程也会影响用户体验。因此,往往会在 App 端对图片做缓存机制,以避免同一张图片反复发起请求。这个时候cached_image_network就派上用场了
上一篇Flutter 给列表增加下拉刷新和上滑加载更多功能,我们使用了列表,其中列表中有从网络下载图片。直接使用 Flutter 自带的 Image.network 下载图片一是无法缓存,二是体验不够好。熟悉 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 替代原有的图片加载方式(如 Image.network):
CachedNetworkImage(imageUrl: "http://via.placeholder.com/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, placeholder: (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'), ), ); }
效果
效果如下图所示,下拉刷新后,可以先看到占位图,然后逐渐过渡到加载成功的图片。如果修改链接为一个非法链接或资源不存在的链接,则会显示图片加载失败的占位图。这种体验相比空白没有任何指示的 Image.network好很多。
以上就是Flutter 使用cached_image_network优化图片加载体验的详细内容,更多关于Flutter 用cached_image_network优化图片加载的资料请关注脚本之家其它相关文章!
相关文章
Android Location服务之LocationManager案例详解
这篇文章主要介绍了Android Location服务之LocationManager案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08Android OnCreate()中获取控件高度与宽度两种方法详解
这篇文章主要介绍了Android OnCreate()中获取控件高度与宽度两种方法详解的相关资料,这里提供了两种方法,大家可以都看下,需要的朋友可以参考下2016-12-12PullToRefreshListView实现多条目加载上拉刷新和下拉加载
这篇文章主要为大家详细介绍了PullToRefreshListView实现多条目加载上拉刷新和下拉加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2019-01-01
最新评论