flutter cached_network_image的使用介绍 + 内存导致的app崩溃

已于 2024-04-09 14:51:31 修改
阅读量9k 收藏 2
点赞数
分类专栏： Flutter 模板项目搭建 文章标签： flutter显示网络图片
于 2020-12-12 22:48:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gpf1320253667/article/details/111086479
版权

缓存管理

+配合使用缓存管理插件：

flutter_cache_manager:

从缓存中获取图片数据（免重复下载）

var file = await DefaultCacheManager().getSingleFile(url);

图片占用内存太多导致APP崩溃闪退

我们的应用，为了照片质量，都是默认直接上传原图的，上传到七牛云之后，一张照片的大小有的有接近十兆左右，在查看app中某个列表时，因为列表每一项显示的图片都是直接请求的原图，导致列表才加载50条数据左右，就出现了CachedNetworkImage占用内存太大（印象中是2G

了解本专栏 订阅专栏 解锁全文
智玲君
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
【Flutter】包管理（9）Flutter cached_network_image 解决网络图片加载和缓存问题的终极指南
Code Metaverse
06-29 1300
在这篇博客中，我们将深入探讨 cached_network_image 的一些高级功能，包括使用进度指示器、使用 ImageProvider、使用 imageBuilder 自定义图片显示等。我们还将学习如何处理图片加载失败，以及如何使用 flutter_cache_manager。
flutter_cached_network_image:在 Flutter 应用程序中下载、缓存和显示图像
07-23
缓存的网络图像 一个颤振库，用于显示来自互联网的图像并将它们保存在缓存目录中。 如何使用 CachedNetworkImage 可以直接使用，也可以通过 ImageProvider 使用。 CachedNetworkImage 和 CachedNetworkImageProvider 对 web 的支持都很少。 它目前不包括缓存。 使用占位符： CachedNetworkImage ( imageUrl : "http://via.placeholder.com/350x150" , placeholder : (context, url) => CircularProgressIndicator (), errorWidget : (context, url, error) => Icon ( Icons .error),
第三百二十三回
talk_8的专栏
02-13 968
我们在本章回中介绍的CachedNetworkImage组件主要用来缓冲和显示网络图片，这点从它的名字上就可以看出来，该组件可以确保图像能够快速、高效
【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-24 3797
一、cached_network_image 网络图片缓存插件、 二、cached_network_image 加载网络图片、 三、完整代码示例、 四、相关资源
Flutter 完美封装Image
瞬神_夜一的专栏
11-24 1890
紧接着上一篇完美封装Text,本次依然使用android的写法，封装Image,加载本地图片比较简单，这边主要加载网络图片，同步设置宽度、高度、圆角、圆形图片、边框宽度、边框颜色等参数 先看效果图 依然还是熟悉的配方，依然还是熟悉的味道，让你写Flutter有写android组件的感觉 ImageView( imageUrl, width: 100, height: 100, marginLe..
【Flutter】Flutter 图片缓存入门：cached_network_image 解决图片加载的问题
Code Metaverse
06-28 4562
在 Flutter 中，我们可以使用 cached_network_image 这个库来实现图片缓存。
Flutter：网络图像缓存插件——cached_network_image
weixin_41897680的博客
07-15 5527
Flutter：网络图像缓存插件——cached_network_image
Flutter SDK--(cached_network_image使用详情)图片本地缓存/网络加载
eastWind1101的博客
04-23 1058
1.flutter中网络图片加载/本地图片缓存 2.cached_network_image使用详情
【Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-24 4055
一、加载 Flutter 内置的图标、 三、完整代码示例、 三、相关资源、 四、Icons 图标参考 ( 超长截图 | 材料设计图标完整展示 )
【Flutter】【package】cached_network_image 图片缓存插件
自动人生博客
10-15 818
可以缓存图片，在此调用的时候，可以减少网络资源和流量的浪费cached_network_image 图片缓存可以减少网络资源的使用，减少流量和数据加载的时间。
Flutter cached_network_image图片加载流程分析
qq_33224517的博客
06-21 2509
Flutter cached_network_image图片加载流程分析 使用 组件CachedNetworkImage可以支持直接使用或者通过ImageProvider，CachedNetworkImage 和 CachedNetworkImageProvider都对web提供最小支持，只提供加载功能，没有缓存功能 添加占位图 CachedNetworkImage( imageUrl: "http://via.placeholder.com/350x150", p...
flutter_cached_pdfview:Flutter的增强PDF视图
03-06
flutter_cached_pdfview 用于显示iOS和Android的本机PDF视图的软件包，支持从其他资源（例如Path，Asset或Url）打开并对其进行缓存。 支持= [ ]； 从路径打开Pdf（本地文件） 从资产打开PDF 从URl中打开Pdf并将...
flutter_advanced_networkimage:扑高级网络图像提供程序
04-13
flutter_advanced_networkimage : any 然后运行颤动工具： flutter packages get 例子 // using image provider Image ( image : AdvancedNetworkImage ( url, header : header, useDiskCache : true , ...
flutter_advanced_network_image
03-26
flutter_advanced_networkimage : any 然后运行颤动工具： flutter packages get 例子 // using image provider Image ( image : AdvancedNetworkImage ( url, header : header, useDiskCache : true , ...
flutter_image_cropper：适用于Android和iOS的Flutter插件支持裁剪图像
02-02
Image Cropper不会直接在Dart代码中处理图像，而是使用公开Dart API，Flutter应用程序可使用该API与两个功能非常强大的本机库（ 和 ）进行通信以裁剪和旋转图像。 因此，所有积分都属于这些库。 uCrop-亚兰提斯 该...
分布式系统.pptx
04-29
分布式系统.pptx
源代码-360通用ASP防护代码(防sql注入).zip
04-29
源代码-360通用ASP防护代码(防sql注入).zip
node-v8.1.0-darwin-x64.tar.gz
最新发布
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
2020年ti杯电赛省赛A题代码整理
04-29
2020年ti杯电赛省赛a题的项目 分为 手机端（android），主显示端，姿态检测手环端，心率滤波读取端 mcu 采用的是esp32.结合了适配esp32的arduino以及rtos框架进行开发。 开发环境 及 语言 安卓为android studio java开发 esp32为platform io c/c++ 节点间通信方式 tcp直连，手机端为总服务端 手机端 android 原生开发 主显示端 屏幕ili9341 spi 触摸xpt2046 图形 adafruit gfx ad芯片 ads112c04 测温 lmt70 姿态检测端 9轴 bno055 心率检测 心电 ads1292
flutter yuv_420_888 使用 decodeImage
05-25
在Flutter中，可以使用`decodeImage`函数将YUV 420 888格式的图像解码为Dart中的图像对象。YUV 420 888是一种常见的图像格式，特别是在视频处理中，因为它可以有效地压缩图像数据。 以下是一个使用`decodeImage`函数将YUV 420 888格式图像解码为Dart中的图像对象的示例代码： ``` import 'dart:typed_data'; import 'package:flutter/material.dart'; import 'package:image/image.dart' as img; class YUVImage extends StatefulWidget { final Uint8List data; final int width; final int height; YUVImage({this.data, this.width, this.height}); @override _YUVImageState createState() => _YUVImageState(); } class _YUVImageState extends State<YUVImage> { img.Image image; @override void initState() { super.initState(); // decode YUV 420 888 format image to Dart Image object image = img.Image.fromBytes( widget.width, widget.height, widget.data, format: img.Format.yuv420); } @override Widget build(BuildContext context) { return Image.memory(img.encodePng(image)); } } ``` 在上面的示例中，我们首先在`initState`方法中使用`decodeImage`函数从`Uint8List`中解码YUV 420 888格式的图像，并将其转换为`Dart Image`对象。然后在`build`方法中，我们将该图像对象转换为PNG格式，并将其作为内存中的图像显示在Flutter应用程序中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

智玲君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值