flutter缓存图片,flutter 图片加载优化

Flutter 保持页面缓存 保持页面状态

在默认情况下页面切换走时会被销毁,页面切换回来时会被重新创建,如果页面中有列表那么整个列表将会被重新创建,降低了用户体验,下面是解决这个问题的几种处理方式

创新互联建站网络公司拥有十余年的成都网站开发建设经验,近千家客户的共同信赖。提供成都做网站、成都网站建设、网站开发、网站定制、买链接、建网站、网站搭建、响应式网站设计、网页设计师打造企业风格,提供周到的售前咨询和贴心的售后服务

flutter图片内存优化

按照给定尺寸进行图片的解码,而不是解码整个图片的尺寸,用来减少内存的占用。

官方文档:

官方说明:

Instructs Flutter to decode the image at the specified dimensions instead of at its native size.

This allows finer control of the size of the image in ImageCache and is generally used to reduce the memory footprint of ImageCache .

The decoded image may still be displayed at sizes other than the cached size provided here.

使用:

三方库: cached_network_image 限2.5.0之后版本才可用

设定最大的缓存宽度和高度 this.maxWidthDiskCache 、 this.maxHeightDiskCache

使用:

从相册选取图片,展示时使用指定尺寸宽高进行处理。

使用三方库:

使用自定义 provider 来指定所需图片的宽高:

AssetEntityImageProvider 传入宽高和图片原图 AssetEntity 数据。

provider 中 key.entity.thumbDataWithSize 方法:

进入 entity 中 thumbDataWithSize 方法:

进入 _getThumbDataWithId 方法中,

进入getThumb:

调用iOS原生的获取图片方法,

进入 getThumbWithId 方法,

原生实现获取置顶宽高缩略图方法实现:

使用 iOS 原生类 PHImageManager 的

来获取缩略图。

Flutter Image图片加载流程

图片加载过程是由ImageProvider触发的。而ImageProvider表示异步获取图片数据的操作,可以从资源,网络,文件等不同的渠道获取。

首先,ImageProvider根据_ImageState中传递的图片配置生成对应的图片缓存key,然后去ImageCache中查找是否由对应的图片缓存,如果有,通知刷新对应的UI;如果没有通过ImageStream异步加载,加载完成后更新缓存,然后通知_ImageState刷新UI。

ImageCache采用的是LRU(Least Recently Used)

flutter 图片缓存

Flutter的图片缓存机制有问题(可能是我使用的版本1.12.13有问题)

网络图片会默认缓存到本地,但是不管图片是不是完整的或者损坏的,导致页面在下次进入的时候会优先从缓存里读取图片。有些图片是没有加载完成的,或者损坏的,导致图片无法显示。UI效果就是显示成白色的。

一种解决方式:加载前或者退出后清理图片缓存

ImageCache  imageCache = PaintingBinding.instance.imageCache; 

imageCache.clear();

缺点就是每次图片都想要从网络上获取,增加服务器负担

Flutter进行本地缓存

get方法获取数据,封装存储和移除方法用于操作数据缓存列表(需要优化,仅参考)


分享名称:flutter缓存图片,flutter 图片加载优化
本文来源:http://scyanting.com/article/dsdejsj.html