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优化图片加载的资料请关注我们其它相关文章!

(0)

相关推荐

  • Flutter中网络图片加载和缓存的实现

    前言 应用开发中经常会碰到网络图片的加载,通常我们会对图片进行缓存,以便下次加载同一张图片时不用再重新下载,在包含有大量图片的应用中,会大幅提高图片展现速度.提升用户体验且为用户节省流量.Flutter本身提供的Image Widget已经实现了加载网络图片的功能,且具备内存缓存的机制,接下来一起看一下Image的网络图片加载的实现. 重温小部件Image 常用小部件Image中实现了几种构造函数,已经足够我们日常开发中各种场景下创建Image对象使用了. 有参构造函数: Image(Key k

  • Flutter Image实现图片加载

    Image 简介 Android ios 原生中使用 ImageView 来加载显示图片. 在flutter 中通过Image来加载并显示图片. 所有的widget并不是直接绘制图片的,而是控制的图片的主要属性的容器,负责绘制的是RenderObject,他们中间是通过ElementTree来联系起来.有了这个基础后,所有的widget都不会提供画布(canvas)来直接绘制image RawImage 这是一个最基础图片容器Widget. Image 这是一个通用包装类,它包装了RawImag

  • flutter 轮播图动态加载网络图片的方法

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费.开源的. Swiper,网上很多例子只是加载固定的几张图,并且页面只有一个轮播图,在实际应用中,可能会遇到类似ins这种,加载列表,并且都是多图模式的情况. 需要添加依赖包 flukit: ^1.0.0 引用 import 'package:flukit/flukit.da

  • Flutter 使用cached_image_network优化图片加载体验

    在 App 中会经常遇到需要从后台拉取图片的场景,这一方面会给服务器带来网络带宽消耗,另一方面加载图片的等待过程也会影响用户体验.因此,往往会在 App 端对图片做缓存机制,以避免同一张图片反复发起请求.这个时候cached_image_network就派上用场了 上一篇Flutter 给列表增加下拉刷新和上滑加载更多功能,我们使用了列表,其中列表中有从网络下载图片.直接使用 Flutter 自带的 Image.network 下载图片一是无法缓存,二是体验不够好.熟悉 iOS 的肯定知道 SD

  • Android优化查询加载大数量的本地相册图片

    一.概述 讲解优化查询相册图片之前,我们先来看下PM提出的需求,PM的需求很简单,就是要做一个类似微信的本地相册图片查询控件,主要包含两个两部分: 进入图片选择页面就要显示出手机中所有的照片,包括系统相册图片和其他目录下的所有图片,并按照时间倒叙排列 切换相册功能,切换相册页面列出手机中所有的图片目录列表,并且显示出每个目录下所有的图片个数以及封面图片 这两个需求看似简单,实则隐藏着一系列的性能优化问题.在做优化之前,我们调研了一些其他比较出名的app在加载大数量图片的性能表现(gif录制的不够

  • Android Fresco图片加载优化的方案

    优化背景 一般情况下,Fresco图片加载需使用SimpleDraweeView,这个控件并不能自动根据自身的尺寸按需加载图片,即一个 N×N 的UI控件,背后加载的实际图片可能是 2N×2N.这就导致了实际应用运行过程中的内存使用效率不高,需要针对其进行内存优化. 在一些入门级硬件设备上,表现得尤为明显,随着程序的运行时间的增长,OOM的风险也不断加大. Fresco版本:1.13.0 数据记录 声明控件大小为 480×270 <com.facebook.drawee.view.SimpleD

  • Flutter图片加载与缓存机制的深入探究

    目录 前言 图片控件 图片解析 缓存管理 ​新增缓存 缓存清理 图片加载 滑动中处理 总结 前言 今天来学习一下 Flutter 自身是如何加载图片和管理图片的. Flutter 提供了一个图片控件 Image,Image 定义了若干中加载图片的方式,包括 Image.asset.Image.file.Image.network.Image.memory. Image内部维护了一个 ImageProvider对象,ImageProvider则真正维护整个图片加载的工作.Widget 本身内部是体

  • ios开发UITableViewCell图片加载优化详解

    目录 前言 图片自适应比例 XHWebImageAutoSize 仅加载当前屏幕的内容 预加载 前言 我们平时用UITableView用的很多,所以对列表的优化也是很关注的.很多时候,我们设置UIImageView,都是比例固定好宽高的,然后通过 scaleAspectFill 和 clipsToBounds 保持图片不变形,这样子做开发的效率是很高的,毕竟图片宽高我们都是固定好的了. 那如果产品要求图片按真正的比例展示出来呢?如果服务器有返回宽和高,那就好办了,那如果没有呢,我们应该怎么去做呢

  • flutter中的资源和图片加载示例详解

    目录 封面图 指定相应的资源 资源绑定 Asset bundling 资源变体 加载资源 加载文本资源 加载图片 加载依赖包中的图片 最后 封面图 下个季度的目标是把前端监控相关的内容梳理出来,梳理出来之后可能会在公司内部做个分享- Flutter应用程序既括代码也包括一些其他的资产,我们通常这些资产为资源. 有时候我会思考assets这个单词,在程序中到底应该翻译为资产呢?还是翻译为资源?按照习惯,我们这里还是称为资源好了- 这些资源是一些与应用程序捆绑在一起和并且部署应用时会用到的的文件,在

  • JavaScript实现页面滚动图片加载(仿lazyload效果)

    为什么写这篇文章? 1.优化页面很实用的方法,技术实现不难: 2.搜索了相关内容的文章,好像都是用jQuery的方法,可是如果不用jQuery的站长难道就不能用这种方法了么: 3.做技术分享也是在让更多人帮自己测试,因为这个本人木有在项目中实际用到,都是自己琢磨的,所有如果有问题请大家指出,先谢谢了: 4.这个月的博客还没写: 5.刚好木有工作任务,此时不写更待何时... 现在的页面大多都具有的特点 - 内容丰富,图片较多:像我们经常浏览的淘宝,京东,团购网站之类的(本人网购控,属于一个月不在网

  • Android图片加载利器之Picasso基本用法

    今天开始我们来学习一下Picasso,计划包括以下几方面的内容: 图片加载利器之Picasso进阶 图片加载利器之Picasso源码解析 目前市场上比较流行的图片加载框架主要有UniversalImageLoader,Picasso,Glide,Fresco. 下面简单介绍一下这几个框架: UniversalImageLoader:这个可以说是非常非常经典的一个了,相信每个app的开发人员都使用过,只可惜作者已经停止该项目的维护了,所以不太推荐使用. Picasso:是Square公司出品的图片

  • JavaScript前端图片加载管理器imagepool使用详解

    前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片url" />. 经过不断优化,出现了图片延迟加载方案,这回图片的URL不直接写在src属性中,而是写在某个属性中,比如:<img src="" data-src="图片url" />.这样浏览器就不会自动加载图片,等到一个恰当的时机需要加载

随机推荐