开发者社区> 岛上码农> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

使用 cached_network_image 优化图片加载体验

简介: 在 Flutter 中,cached_image_network 即提供了缓存网络图片功能,同时还提供了丰富的加载过程指示,可以大幅提升图片加载过程的体验和降低服务器资源占用。
+关注继续查看
在 App 中会经常遇到需要从后台拉取图片的场景,这一方面会给服务器带来网络带宽消耗,另一方面加载图片的等待过程也会影响用户体验。因此,往往会在 App 端对图片做缓存机制,以避免同一张图片反复发起请求。在 Flutter 中,cached_network_image 即提供了缓存网络图片功能,同时还提供了丰富的加载过程指示。

上一篇[Flutter 之列表下拉刷新和上拉加载
](https://developer.aliyun.com/article/981634),我们使用了列表,其中列表中有从网络下载图片。直接使用 Flutter 自带的 Image.network 下载图片一是无法缓存,二是体验不够好。熟悉 iOS 的肯定知道 SDWebImage,即 Objective-C 上用得最广泛的图片缓存开源组件。与 SDWebImage 类似,Flutter 的 cached_network_image 插件也实现了这样的功能。cached_network_image 使用十分简单,首先在 pubspec.yaml 中添加依赖:

dependencies:
  flutter:
    sdk: flutter

  # ...其他依赖
  cached_network_image: ^3.0.0

之后在需要使用 cached_network_image 的地方引入源码:

import 'package:cached_network_image/cached_network_image.dart';

最后在需要加载网络图片的地方使用cached_network_image 替代原有的图片加载方式(如 Image.network):

CachedNetworkImage(imageUrl: "http://via.placeholder.com/350x150"),

以上是 cached_network_image 最简单的用法,当然为了用户体验更好,推荐是使用占位图或加载指示器的方式提示用户图片正在加载。

使用占位图

CachedNetworkImage 提供了占位图和加载失败后的错误指示的方法用于静态指示。我们分别准备 image-default.png 和 image-failed.png 文件表示默认占位图和加载失败后的占位图,然后用 CachedNetworkImage 构造方法的 placeholdererrorWidget 来使用占位图,如下所示:

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好很多。

效果图.png


欢迎关注个人公众号:岛上码农

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SpringCloud升级之路2020.0.x版-35. 验证线程隔离正确性
SpringCloud升级之路2020.0.x版-35. 验证线程隔离正确性
24 0
第四周编程作业(二)-Deep Neural Network for Image Classification: Application(二)
第四周编程作业(二)-Deep Neural Network for Image Classification: Application(二)
73 0
JS:dom-to-image网页截图保存
JS:dom-to-image网页截图保存
73 0
使用Apache Impala(CDH6)查询OSS的数据
CDH6 目前CDH的最新版本是6.0.1,支持Hadoop 3.0.0,本文将介绍如何使CDH6的相关组件(Hadoop/Hive/Spark/Impala等)能够读写OSS。CDH5对OSS的支持在这篇文章介绍。
4175 0
ImageUtil 图片的缩放 裁剪
      import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.
859 0
IOS开发---菜鸟学习之路--(十四)-将BASE64图片转换成Image
本文基本全部都是代码 首先是.H文件 1 #import 2 3 @interface Base64AndImageHelp : NSObject 4 - (NSString*)encodeURL:(NSString *)string; 5 +(id)mydataWithBas...
788 0
+关注
岛上码农
Flutter爱好者,公众号:岛上码农
32
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载