Flutter 高性能、多功能的全场景滚动容器，一定要看，音视频时代你还不会NDK开发

最新推荐文章于 2024-07-08 14:52:13 发布

rr8f2haQf

最新推荐文章于 2024-07-08 14:52:13 发布

阅读量981

点赞数 15

分类专栏： 2024年程序员学习文章标签： flutter 音视频

本文链接：https://blog.csdn.net/rr8f2haQf/article/details/136926243

版权

本文详细介绍了在Flutter中实现高性能、多功能的全场景滚动容器的技巧，包括可变child count的处理、局部刷新（LoadMore、Delete、Insert）的实现、Element复用能力和分帧渲染的优化方法，旨在提升滚动性能和用户体验。

摘要由CSDN通过智能技术生成

下面我们来看看针对与具体的场景，如何实现精准的 childWidgets 与 childElements 控制，实现局部刷新的能力的。

可变的 child count

在常见的需要局部刷新的场景，容器元素的数量往往会发生变化。在常见的 CustomScrollview 使用中，childCount 都是创建时指定的，当 childCount 方式变化，就需要重新 build 列表容器；

第一步就是避免因为 sliver 内部元素数量变化，必须重新build整个容器的问题；

虽然也可以使用childCount为空，根据builder返回null来决定是否为最后一个child的方式实现可变childCount的目的，但这种方式并不太符合常用的习惯，对使用方也会增加额外成本，所以并未采用这种方式。

做法比较简单，通过继承自SliverChildBuilderDelegate，修改childCount获取方法。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D4Lrk4S7-1612336882848)(https://upload-images.jianshu.io/upload_images/24957688-78c067342b61a505.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

局部刷新之 LoadMore

LoadMore的实现相对会比较简单，需要做的主要有两点：

清理widgets缓存，防止不算加载的过程中内存占用过大；保存与 _childElements 中 index 相同的 widget；这里有一个需要特别注意的点：要过滤为 null 的 widget，否则这个位置的 widget 无法正常展示；（_childWidgets 最后一个 index 会是一个为 null 的值，具体为什么插入一个为 null 的 widget 大家可以阅读源码寻找答案）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ryEHpvfJ-1612336882849)(https://upload-images.jianshu.io/upload_images/24957688-0efe4d1ea3d7e692.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]