西安网站开发培训多少钱,游戏代理商如何赚钱,国家信息公示网,做免费推广的平台文章目录 1. 概念介绍2. 使用方法2.1 基本用法2.2 缓冲原理 3. 示例代码4. 内容总结 我们在上一章回中介绍了FadeInImage组件相关的内容#xff0c;本章回中将介绍CachedNetworkImage组件.闲话休提#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍
我们在本章… 文章目录 1. 概念介绍2. 使用方法2.1 基本用法2.2 缓冲原理 3. 示例代码4. 内容总结 我们在上一章回中介绍了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. 示例代码
///装饰图片给图片添加滤镜
CachedNetworkImage(imageUrl: http://via.placeholder.com/200x150,imageBuilder: (context, imageProvider) Container(decoration: BoxDecoration(image: DecorationImage(image: imageProvider,fit: BoxFit.cover,colorFilter:ColorFilter.mode(Colors.red, BlendMode.colorBurn)),),),placeholder: (context, url) CircularProgressIndicator(),errorWidget: (context, url, error) Icon(Icons.error),
),///显示图片加载进度
CachedNetworkImage(imageUrl: http://via.placeholder.com/350x150,progressIndicatorBuilder: (context, url, downloadProgress) CircularProgressIndicator(value: downloadProgress.progress),errorWidget: (context, url, error) Icon(Icons.error),),
///和官方组件配合使用
Image(image: CachedNetworkImageProvider(url))我们在上面的示例代码中演示了该组件的三种使用方法大家可以参考代码中的注释。此外上面的示例代码不是我写的它们来自该组件的官方文档组件中使用的网络 图片可以正常使用我在这里就不演示程序的运行结果了建议大家自己动手去实践。
4. 内容总结
我们在本章回中介绍的CachedNetworkImage组件和上一章回中介绍的FadeInImage组件都可以加载和显示网络图片它们都提供了相似的属性来实现占位符和错误处 理功能。不过CachedNetworkImage组件还提供了装饰图片的属性以及获取图片加载进度的属性。最后我们对本章回中的内容做一个全面的总结
我们可以使用CachedNetworkImage组件来加载和显示网络图片我们可以使用CachedNetworkImage组件来实现占位符和错误处理功能;可以使用CachedNetworkImage组件相关的属性来装饰图片和获取图片加载进度可以在官方的Image组件中使用CachedNetworkImage组件来显示和加载网络图片 看官们与CachedNetworkImage组件相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
