Flutter:网络图像缓存插件——cached_network_image

这篇具有很好参考价值的文章主要介绍了Flutter:网络图像缓存插件——cached_network_image。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

为什么要使用这个插件,有什么用呢?毕竟官方提供了Image.network来进行网络图片加载

Image.networkCachedNetworkImage都可以用于在Flutter中加载网络图片,但它们之间有一些区别。

Image.network是Flutter核心库提供的一个构造函数,用于直接加载网络图片。它可以从给定的URL加载图片,并将其显示在应用程序的界面上。但是,Image.network没有内置的缓存机制,因此每次使用时都会重新下载图片,这可能会导致性能问题。

CachedNetworkImage是一个第三方插件,它提供了更高级的网络图片加载和缓存功能。它不仅可以加载网络图片,还可以将其缓存到本地文件系统中,以便在后续的加载请求中快速获取。这样可以节省网络带宽和加载时间,并提升应用程序的性能。

使用CachedNetworkImage插件,您可以更方便地管理网络图片的加载和缓存。
它提供了一些额外的功能,如加载进度指示器、加载错误处理和占位符图片等。此外,CachedNetworkImage还支持预加载和手动刷新缓存等功能,使您能够更好地控制图片加载的行为。

总结起来,Image.network是一个简单的用于加载网络图片的构造函数,而CachedNetworkImage是一个更强大的插件,提供了更好的网络图片加载和缓存功能,以及一些额外的特性。如果您需要更高级的图片加载和缓存功能,建议使用CachedNetworkImage插件。

基本使用

安装

flutter pub add cached_network_image

带占位符

Center(
  child: CachedNetworkImage(
    imageUrl: 'https://scpic.chinaz.net/files/default/imgs/2023-07-12/40fd0b90e02f7fd4.jpg',
    placeholder: (context,url) => const CircularProgressIndicator(),
    errorWidget: (context, url, error) => const Icon(Icons.error),
  ),
);

imageUrl参数指定了要加载的网络图片的URL。placeholder参数定义了加载过程中显示的占位符,通常使用一个加载指示器来表示。errorWidget参数定义了加载失败时显示的占位符,通常使用一个错误图标来表示。
Flutter:网络图像缓存插件——cached_network_image,dart 和 Flutter,flutter,缓存
带进度指示器

Center(
  child: CachedNetworkImage(
    imageUrl: 'https://scpic.chinaz.net/files/default/imgs/2023-07-12/40fd0b90e02f7fd4.jpg',
    progressIndicatorBuilder: (context, url, downloadProgress) => 
               CircularProgressIndicator(value: downloadProgress.progress),
    errorWidget: (context, url, error) => const Icon(Icons.error),
  ),
);

占位符和进度指示器可以同时使用。

结合Image使用

Image(image: CachedNetworkImageProvider(url))

结合其他小部件使用
imageBuilder 用于自定义容器

在这里插入代码片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),
),

缓存目录
cached_network_image插件会将图片缓存在应用程序的缓存目录中。具体来说,它会将缓存文件存储在设备的本地文件系统中的应用程序缓存目录中。在Android设备上,缓存目录通常是/data/data/<应用程序包名>/cache,而在iOS设备上,缓存目录通常是Library/Caches/<应用程序包名>/cached_network_image插件会自动管理缓存文件的创建、读取和删除,使得我们可以方便地使用缓存功能,提高图片加载的效率和性能

Flutter:网络图像缓存插件——cached_network_image,dart 和 Flutter,flutter,缓存
Flutter:网络图像缓存插件——cached_network_image,dart 和 Flutter,flutter,缓存文章来源地址https://www.toymoban.com/news/detail-568433.html

到了这里,关于Flutter:网络图像缓存插件——cached_network_image的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Spring Cache框架(缓存)

    1、介绍: Spring Cache 是一个框架,实现了基于注解的缓存功能,只需要简单加个注解,就能实现缓存功能。它提供了一层抽象,底层可以切换不同的cache实现。具体就是通过 CacheManager 接口来实现不同的缓存技术。 针对不同的混存技术需要实现不同的 CacheManage r: CacheManager 描述

    2024年02月11日
    浏览(61)
  • SpringBoot Cache缓存

    application.properties配置文件 ehcache.xml配置文件 name:cache的名字,必须惟一。 eternal:是否持久化,若为true,则表示缓存元素不会过期。 maxElementsInMemory:cache中最多可以存放的元素的数量。 overflowToDisk:溢出是否写入磁盘。 diskPersistent:是否持久化磁盘缓存。 timeToIdleSeconds:访

    2024年01月18日
    浏览(47)
  • Buffer(缓冲)、Cache(缓存)

    Buffer 用途:缓冲通常用于临时存储数据,以平衡不同速度的数据传输过程直接的差异。它可以用来解决数据传输速度不匹配的问题。 例如: 当您在观看视频时,视频播放器会缓冲一段时间的视频数据,以便在网络速度慢或不稳定的情况下也能够流畅的播放 用完之后,就清除

    2024年02月03日
    浏览(48)
  • 简述Spring Cache缓存策略

    Spring框架提供了一种名为Spring Cache的缓存策略。Spring Cache是一种抽象层,它提供了一种方便的方式来管理缓存,并与Spring应用程序中的各种缓存实现(如EhCache、Guava、Caffeine等)集成。 Spring Cache使用注解(如@Cacheable、@CachePut、@CacheEvict等)来描述与缓存相关的操作。这些注解

    2024年02月10日
    浏览(51)
  • 【springboot】Spring Cache缓存:

    一、导入Maven依赖: 二、实现思路: 三、代码开发:

    2024年02月11日
    浏览(45)
  • bazel远程缓存(Remote Cache)

    您可以将服务器设置为构建输出(即这些操作输出)的远程缓存。这些输出由输出文件名列表及其内容的哈希值组成。借助远程缓存,您可以重复使用其他用户的 build 中的构建输出,而不是在本地构建每个新输出。 增量构建极大的提升了本地研发的构建效率,但有些场合它

    2024年02月09日
    浏览(31)
  • Spring | Spring Cache 缓存框架

    Spring Cache 是 Spring 的一个框架, 实现了基于注解的缓存功能 。只需简单加一个 注解 ,就能实现 缓存功能 。 Spring Cache提供了一层抽象 , 底层可以切换不同的缓存实现 。比较 常见 的(底层) 缓存实现 有: Redis、EHCache、Caffeine 。可自定义地修改 Spring Cache 底层的 缓存实现 。

    2024年02月08日
    浏览(46)
  • Docker Build Cache 缓存清理

    Docker 18.09 引入了 BuildKit ,提升了构建过程的性能、安全、存储管理等能力。 docker system df 命令,类似于 Linux上的 df 命令,用于查看 Docker 的磁盘使用情况: TYPE 列出了 Docker 使用磁盘的 4 种类型: 类型 说明 Images 所有镜像占用的空间,包括拉取下来的镜像,和本地构建的。

    2024年01月17日
    浏览(35)
  • Linux清除缓存buff/cache

    使用free -h 查看内存情况发现buff/cache缓存占用太多了 导致我hive都跑不动 原因: buff/cache是由于系统读写导致的文件缓存,没有及时释放 办法:清除缓存 跑这三个命令就可以了 高级办法 这里可以写个脚本来自动定时清除缓存,新建一个脚本 touch cleanBuffCache.sh 给定义的脚本赋

    2023年04月23日
    浏览(77)
  • Spring Boot 缓存 Cache 入门

    在系统访问量越来越大之后,往往最先出现瓶颈的往往是数据库。而为了减少数据库的压力, 我们可以选择让产品砍掉消耗数据库性能的需求 。 当然也可以引入缓存,在引入缓存之后,我们的读操作的代码,往往代码如下: 这段代码,是比较常用的缓存策略,俗称**“被动写

    2024年02月15日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包