Flutter 高性能、多功能的全场景滚动容器,一定要看,android开发app

本文详细介绍了Flutter的PowerScrollView组件,强调其高性能和局部刷新能力。通过事件回调、自动曝光和滚动到指定index等功能,解决了Android开发中的滚动难题。并深入探讨了局部刷新的实现原理,包括LoadMore、Delete和Insert操作,以及Element复用策略,旨在提高用户体验和性能。
摘要由CSDN通过智能技术生成

控制器:主要用于控制 PowerScrollView 的刷新、加载更多,控制滚动到某个位置等。

事件回调:我们将事件分类,外部使用时可只监听需要的回调。

刷新配置:为了提升刷新的灵活性,我们将刷新单出抽出,既可以使用我们提供的标准刷新组建,也可自定义。

功能完善


我们为 PowerScrollView 完善了业务使用的核心诉求,包括自动曝光、滚动到某个 index 、瀑布流、刷新加载更多等能力。下面将重点介绍前两部分。

自动曝光能力

在 Flutter 中,通常不得不将曝光放在 build 函数中,这使得曝光会错乱,不在屏幕上但是在屏幕缓冲区的部分将会被错误曝光,且有多次曝光问题,代码臃肿混乱,这都使得业务层非常头疼。曝光能力是各种业务都必须的核心诉求,我们在 PowerScrollView 中统一进行了封装,通过事件回调给使用者。

前面我们知道,在 PowerScrollView 中,我们用 cell 封装了最小粒度的 item,因为对 item 的封装,使得我们的掌控力大大增强。正因为此,我们自定义了 cell 的 StatefulElement,在 element 的生命周期中 mount、unmount 记录当前 element,利用 InheritedWidget ,将树上的 element 维护在外面的列表中。

在 PowerScrollView 的滚动过程中,我们会遍历检查 element 数组,筛选屏幕中的元素进行曝光回调。其中被筛选掉的即为缓冲区的元素,同时维护个数组避免单元素当次屏幕中多次曝光。

为了减少滚动中的多次遍历检查 element 数组,我们加入了控制滚动采样率的可配参数,通过此参数,我们可以控制滚动一定距离后才进行检查。

在复杂场景中,会存在 cell 高度先为 0,下载模板渲染后再撑开的情况,这种情况下整个 element list 数据会非常大,且数据并不正确,我们需要过滤掉这种。但是当 cell 刷新之后,有了真实的高度,我们需要进行正确的曝光。所以我们在 cell 中监听了 size 的变化,当高度由 0 到非 0 的时候,通知上层进行一次曝光。

滚动到某个index

Flutter 本身提供了滚动到 position 距离的能力,但一般业务场景下,我们不知道要滚动的距离,最多知道要滚动到第几个,这使得在 Flutter 侧很多交互无法实现。这个问题我们会分几种场景进行分析。

场景一:当要滚动的目标 index 的 cell 在视图树中(当前屏幕及缓冲区),由于我们已经维护了一个屏幕及缓冲区的element数组,我们可以遍历找到,然后将其滚动到可见区域即可。

场景二:当要滚动的目标 index 的 cell 不在视图树中时,首先我们根据当前屏幕的 index 与目标 index

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值