CachedNetworkImage组件的用法


我们在上一章回中介绍了"FadeInImage组件"相关的内容,本章回中将介绍CachedNetworkImage组件.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在本章回中介绍的CachedNetworkImage组件主要用来缓冲和显示网络图片,这点从它的名字上就可以看出来,该组件可以确保图像能够快速、高效地加载,同时
又可以避免不必要的网络请求和资源浪费。该组件由cached_network_image这个三方包提供,它和官方提供的FadeInImage组件在功能上十分相似。我们本章回中
将详细介绍它的使用方法。

2. 使用方法

2.1 基本用法

和其它组件类似,CachedNetworkImage组件提供了相关的属性来控制自己,下面是该组件中常用的属性:

  • imageUrl:该属性主要用来控制被加载的网络图片,它的值是一个图片网址;
  • imageBuilder:该属性主要用来装饰被加载的图片,比如对图片进行缩放操作;
  • errorWidget:该属性主要用来控制显示的错误提示图标或者文字;
  • placeholder:该属性用来控制在加载网络图片之前显示的占位图片资源;
  • fit:该属性主要用来控制图片如何适应其父容器,这个是图片类组件中最常用的属性;
  • progressIndicatorBuilder:该属性用来显示图标加载进度,它是方法类型,进度值在方法参数中;

2.2 缓冲原理

CachedNetworkImage组件背后的缓冲原理是自己开发,它基于FlutterCacheManager组件实现。这两个组件都是一个名叫BaseFlow的组织(公司)提供。该组件的
缓冲原理:第一次运行时从网络下载图像,并将其缓存到本地。当下一次需要加载同一图像时,它会首先检查缓存中是否存在,如果存在,则直接从缓存中读取,这样就避
免了重复的网络请求和下载。我们在后面章回中将专门介绍FlutterCacheManager组件。

3. 示例代码


                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值