第三百二十三回

文章目录

  • 1. 概念介绍
  • 2. 使用方法
    • 2.1 基本用法
    • 2.2 缓冲原理
  • 3. 示例代码
  • 4. 内容总结

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

第三百二十三回_第1张图片

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组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,移动开发Flutter)