第三百二十二回

文章目录

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/681119.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#win form解决导入CSV文件数据缺失问题

winform CSV文件入库数据缺失 public string TransferCSVData(string csvFile, string tablename, string connectionString){try{DataTable dataTable new DataTable();string[] columnNames File.ReadLines(csvFile, Encoding.GetEncoding("GBK")).First().Spli…

C++函数对象-运算符函数对象 - 位运算 - 实现 x y 的函数对象 (std::bit_and)

任何定义了函数调用操作符的对象都是函数对象。C 支持创建、操作新的函数对象&#xff0c;同时也提供了许多内置的函数对象。 运算符函数对象 C 针对常用的算术和逻辑运算定义了很多函数对象&#xff1a; 位运算 实现 x & y 的函数对象 std::bit_and template< class…

《Java 简易速速上手小册》第7章:Java 网络编程(2024 最新版)

文章目录 7.1 网络基础和 Java 中的网络 - 揭开神秘的面纱7.1.1 基础知识7.1.2 重点案例&#xff1a;实现一个简单的聊天程序7.1.3 拓展案例 1&#xff1a;使用 UDP 进行消息广播7.1.4 拓展案例 2&#xff1a;建立一个简单的 Web 服务器 7.2 创建客户端和服务器 - 构建沟通的桥…

Netty源码系列 之 FastThreadLocal源码

目录 Netty优化方案之 FastThreadLocal 前言 ThreadLocal ThreadLocal是干什么的&#xff1f; 为什么要使用ThreadLocal工具类去操控存取目标数据到Thread线程 &#xff1f; ThreadLocal的使用场景 目标数据存储到Thread线程对象的哪里&#xff1f; 怎么样把一个目标数据…

学习Android的第六天

目录 Android TextView 文本框 TextView 基础属性 范例 带阴影的TextView 范例 带边框的TextView 范例 带图片(drawableXxx)的TextView 范例1 范例2 使用autoLink属性识别链接类型 范例 TextView 显示简单的 HTML 范例1 范例2 SpannableString & Spannable…

政安晨:演绎在KerasCV中使用Stable Diffusion进行高性能图像生成

小伙伴们好&#xff0c;咱们今天演绎一个使用KerasCV的StableDiffusion模型生成新的图像的示例。 考虑计算机性能的因素&#xff0c;这次咱们在Colab上进行&#xff0c;Colab您可以理解为在线版的Jupyter Notebook&#xff0c;还不熟悉Jupyter的的小伙伴可以去看一下我以前的文…

python+ flask+MySQL旅游数据可视化81319-计算机毕业设计项目选题推荐(免费领源码)

摘要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对旅游数据可视化等问题&#xff0c;对旅游数据…

[英语学习][28][Word Power Made Easy]的精读与翻译优化

[序言] 译者的这次翻译, 如果按照一一对应的单词翻译&#xff0c;正确率是100%, 但可惜的是, 从整体的翻译上, 正确率下降到30%. 也就是说没有正确表达出作者的逻辑. [英文学习的目标] 提升自身的英语水平, 对日后编程技能的提升有很大帮助. 希望大家这次能学到东西, 同时加入…

端口映射原理及实验概要

端口映射是一种网络技术&#xff0c;用于将外部网络请求定向到内部网络中的特定服务或设备。其原理可以分为两个部分&#xff1a;NAT&#xff08;Network Address Translation&#xff09;和端口转发。 NAT是一种将网络数据包的目标IP地址和端口从一个网络地址转换为另一个网络…

Git仓库

1、安装 sudo yum install -y git 2、什么叫版本控制Git&&Gitee&&Github 对源代码的历史修改进行维护&#xff0c;保留历史的所有的修改痕迹。 在Linux中&#xff0c;版本控制是指对软件、文档等项目的不同版本进行管理和追踪的过程。通常使用版本控制系统&…

图表自动化开篇

目录 前言&#xff1a; 使用 Canvas 或者 SVG 渲染 选择哪种渲染器 代码触发 ECharts 中组件的行为 前言&#xff1a; 图表自动化一直以来是自动化测试中的痛点&#xff0c;也是难点&#xff0c;痛点在于目前越来越多公司开始构建自己的BI报表平台但是没有合适的自动化测试…

BLE蓝牙安全机制

1. 蓝牙配对 蓝牙配对是建立安全连接的关键过程。对于传统蓝牙应采用SSP配对方式&#xff0c;而低功耗蓝牙4.0和4.1的版本应使用legacy pairing配对方式&#xff0c;4.2以后的版本应采用Secure connection的配对方式。 传统的蓝牙采用的配对方式如下&#xff1a; 蓝牙2.1版本…

1012: 【C1】【循环】【入门】均值

题目描述 给出一组样本数据&#xff0c;计算其均值。 输入 输入有两行&#xff0c;第一行包含一个整数n&#xff08;1&#xff1c;n&#xff1c;100&#xff09;&#xff0c;代表样本容量&#xff1b;第二行包含n个绝对值不超过1000的浮点数&#xff0c;代表各个样本数据。 …

《Linux 简易速速上手小册》第4章: 包管理与软件安装(2024 最新版)

文章目录 4.1 包管理基础4.1.1 重点基础知识4.1.2 重点案例&#xff1a;在 Ubuntu 上安装和管理软件4.1.3 拓展案例 1&#xff1a;添加软件仓库4.1.4 拓展案例 2&#xff1a;回滚软件到旧版本 4.2 使用 APT 与 YUM4.2.1 重点基础知识4.2.2 重点案例&#xff1a;在 Ubuntu 上配置…

排序刷题11

题目来源&#xff1a;[NOIP1998 提高组] 拼数 - 洛谷 解题思路&#xff1a;这道题重点在于怎么把数字拼接&#xff0c;得到最大的值。这里可以用to_string&#xff08;&#xff09;函数&#xff0c;将数字先转换为字符再拼接&#xff0c;最后得到拼接的最大值。ps&#xff1a;…

Kong 负载均衡

负载均衡是一种将API请求流量分发到多个上游服务的方法。负载均衡可以提高整个系统的响应速度&#xff0c;通过防止单个资源过载而减少故障。 在以下示例中&#xff0c;您将使用部署在两台不同服务器或上游目标上的应用程序。Kong网关需要在这两台服务器之间进行负载均衡&…

2024年华为OD机试真题-求幸存数之和-Java-OD统一考试(C卷)

题目描述: 给一个正整数列 nums,一个跳数 jump,及幸存数量 left。运算过程为:从索引为0的位置开始向后跳,中间跳过 J 个数字,命中索引为J+1的数字,该数被敲出,并从该点起跳,以此类推,直到幸存left个数为止。然后返回幸存数之和。 约束: 1)0是第一个起跳点。 2)起…

Java中,List、Map和Set的区别是什么?

在Java中&#xff0c;List、Map和Set是三种常用的集合类型&#xff0c;它们之间的主要区别如下&#xff1a; 1、List List是有序集合&#xff0c;它可以包含重复元素。 List中的元素是按照插入顺序排列的&#xff0c;可以通过索引访问每个元素。 Java中常见的List实现类有A…

简单易懂:一篇文章讲透所有Python知识

Python语法简单&#xff0c;应用领域广&#xff0c;本文给出 Python八大核心知识点&#xff0c;供大家迅速上手&#xff0c;建议收藏。 第一部分&#xff1a;基础语法 # 6种数据类型# 整数、浮点数、字符串 x 2 y 3.1415926 name "You jump, I jump"# 列表、元组…

嵌入式Qt 计算器界面设计

一.计算器界面设计 计算机界面程序分析&#xff1a; 需要用到的组件&#xff1a; 界面设计&#xff1a; 界面设计实现&#xff1a; 实验1&#xff1a;计算器界面设计 #include <QtGui/QApplication> #include <QWidget> //主窗口 #include <QLineEdit> //文…