Flutter中listView存储长图时上滑出现抖动问题

问题描述：如果 ListView 里面有 100 个长图，每个图可能占 2 个屏幕大小。现在就是下滑到第 10 个长图，然后再上滑的时候，由于 flutter 的渲染机制，不可见即不渲染。上滑时，可见到标号 7 、8 、9 的 widget 之后，马上渲染 7.8.9 图像的时候，会出现抖动。
Flutter中listView存储长图时上滑出现抖动问题

caililin 1楼

你倒是来几个图啊，贴点代码呀。

更多关于Flutter中listView存储长图时上滑出现抖动问题的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

phonegap100 2楼

用自定义 scrollview

vueper 3楼

在Flutter中，使用ListView存储并展示长图时，上滑过程中出现抖动问题通常与图像加载和渲染的效率有关。这里有几个可能的解决方案和优化建议：

使用高效的图像加载库：考虑使用cached_network_image或flutter_image等库，它们提供了更高效的图像加载和缓存机制，可以减少图像加载时的闪烁和抖动。
预加载图像：在ListView滚动到某个位置之前，预加载即将显示的图像。这可以通过监听ListView的滚动位置，并在适当的时候触发图像加载来实现。
优化图像尺寸：确保加载的图像尺寸与展示区域相匹配，避免过大或过小的图像导致的性能问题。可以使用图像压缩或裁剪技术来优化图像尺寸。
使用占位符：在图像加载过程中，使用占位符（如模糊背景或低分辨率的缩略图）来占位，直到高清图像加载完成。这可以减少用户感知到的加载延迟。
调整ListView的滚动性能：通过调整ListView的cacheExtent和physics属性，可以优化其滚动性能。例如，增加cacheExtent可以缓存更多的子项，减少滚动时的重新渲染次数。
检查内存和CPU使用情况：使用Flutter的性能分析工具（如Performance Overlay）来检查应用的内存和CPU使用情况，确保没有资源泄漏或过度消耗导致的问题。

综上所述，通过结合这些优化策略，你应该能够减少或消除ListView在存储和展示长图时出现的抖动问题。