【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )

2023-10-24 17:10

本文主要是介绍【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 ),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 一、cached_network_image 网络图片缓存插件
  • 二、cached_network_image 加载网络图片
  • 三、完整代码示例
  • 四、相关资源





一、cached_network_image 网络图片缓存插件



从网络上加载的图片 , 可以缓存下来 , 如果再次获取该图片就直接从缓存中获取该图片 , 类似 Glide 中的三级缓存机制 ;

缓存图片可以使用 cached_network_image 插件实现 ;

安装 cached_network_image 插件 :

  • 搜索插件 : 在 https://pub.dev/packages 中搜索 cached_network_image 插件 ;
  • 插件地址 : https://pub.dev/packages/cached_network_image
  • 配置插件 : 在 pubspec.yaml 中配置插件 ;
dependencies:cached_network_image: ^2.5.1
  • 获取插件 : 点击 pubspec.yaml 中右上角的 Pub get 按钮 , 获取插件 ;
  • 导入头文件 :
import 'package:cached_network_image/cached_network_image.dart';




二、cached_network_image 加载网络图片



cached_network_image 网络图片缓存插件 , 提供了一个可供加载网络图片的组件 CachedNetworkImage , 在该组件中可以设置加载图片过程中显示的 placeholder ;

Center(// 图片加载完成之前显示的是 placeholder , 加载完成后显示网络图片child: CachedNetworkImage(// 加载网络图片过程中显示的内容 , 这里显示进度条placeholder: (context, url)=>CircularProgressIndicator(),// 网络图片地址imageUrl: "https://img-blog.csdnimg.cn/20210324100419204.png",),
),

运行效果 : 第二张图片本次示例效果 ;

在这里插入图片描述


使用到的网络图片 :

在这里插入图片描述





三、完整代码示例



完整代码示例 :

import 'package:flutter/material.dart';
import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:transparent_image/transparent_image.dart';
import 'package:cached_network_image/cached_network_image.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}/// SD 卡路径String sdPath;@overridevoid initState() {// 获取 SD 卡路径getSdPath();}void getSdPath() async {String path = (await getExternalStorageDirectory()).path;setState(() {sdPath = path;});}@overrideWidget build(BuildContext context) {print("sdPath : $sdPath");return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: ListView(children: [Stack(children: [// 进度条Center(child: CircularProgressIndicator(),),Center(// 网络加载时渐变出现child: FadeInImage.memoryNetwork(// Placeholderplaceholder: kTransparentImage,image: "https://img-blog.csdnimg.cn/2021032321394771.png",),)],),Center(// 图片加载完成之前显示的是 placeholder , 加载完成后显示网络图片child: CachedNetworkImage(// 加载网络图片过程中显示的内容 , 这里显示进度条placeholder: (context, url)=>CircularProgressIndicator(),// 网络图片地址imageUrl: "https://img-blog.csdnimg.cn/20210324100419204.png",),),Stack(children: [// 进度条Center(child: CircularProgressIndicator(),),Center(// 网络加载时渐变出现child: FadeInImage.assetNetwork(// Placeholderplaceholder: "images/waiting.gif",image: "https://img-blog.csdnimg.cn/2021032321394771.png",),)],),// 图片组件 , 从网络中加载一张图片/*Image.network(// 图片地址"https://img-blog.csdnimg.cn/2021032313493741.png",),*//*Image(image: AssetImage("images/sidalin.png"),),*///Image.asset('images/sidalin2.png', ),/// 从 SD 卡加载图片/*if(sdPath != null)Image.file(File('$sdPath/sidalin3.png'),width: 200,),*/],)),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}
}

运行效果 :

在这里插入图片描述





四、相关资源



参考资料 :

  • Flutter 官网 : https://flutter.dev/
  • Flutter 插件下载地址 : https://pub.dev/packages
  • Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
  • 官方 GitHub 地址 : https://github.com/flutter
  • Flutter 中文社区 : https://flutter.cn/
  • Flutter 实用教程 : https://flutter.cn/docs/cookbook
  • Flutter CodeLab : https://codelabs.flutter-io.cn/
  • Dart 中文文档 : https://dart.cn/
  • Dart 开发者官网 : https://api.dart.dev/
  • Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
  • Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
  • GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510

博客源码下载 :

  • GitHub 地址 : https://github.com/han1202012/flutter_image_widget ( 随博客进度一直更新 , 有可能没有本博客的源码 )

  • 博客源码快照 : https://download.csdn.net/download/han1202012/16059814 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

这篇关于【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/276629

相关文章

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J

基于Python实现高效PPT转图片工具

《基于Python实现高效PPT转图片工具》在日常工作中,PPT是我们常用的演示工具,但有时候我们需要将PPT的内容提取为图片格式以便于展示或保存,所以本文将用Python实现PPT转PNG工具,希望... 目录1. 概述2. 功能使用2.1 安装依赖2.2 使用步骤2.3 代码实现2.4 GUI界面3.效