【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",
  ),
),


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


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



使用到的网络图片 :


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





上一篇:安卓开发者必备的 42 个链接


下一篇:HTML Button自动刷新页面的问题