Flutter 高性能、多功能的全场景滚动容器，一定要看！

目前闲鱼的主要业务场景都已经使用 Flutter 来实现，其中流式布局是最常见的页面布局场景（如搜索、商品详情等）。随着业务的快速迭代和业务复杂度的不断提升，对流式场景的能力和性能要求也越来越高；

• 在能力方面，最常见的如卡片曝光、滚动锚点、瀑布流布局等能力，随着业务和需求的不断变化，Flutter原生和一些开源解决方案，渐渐无法满足我们需求。

• 性能方面，流式场景下的列表滚动流畅度问题随着业务复杂度的增加而逐渐恶化，亟需解决以提升用户的使用体验。

针对以上在业务中面临的问题，我们设计了一套流式场景下通用的页面布局解决方案，我们将其命名为 PowerScrollView。

整体架构设计

在架构设计之前，我们充分调研了原生 Native 的滚动容器：UICollectionView（iOS） 和 RecyclerView（Android）。其中UICollectionView 的 Section（段落）理念令我们印象深刻，RecyclerView 的架构设计也启发了我们。由于 Flutter 的独特性，我们不能将其照搬过来，所以我们的目标是结合 Native 成熟的滚动容器，加以 Flutter 的特点，设计出更加优秀的滚动容器。

Flutter 原生有常用的 ListView、GridView，他们布局较为单一，功能较为简单。官方也提供了CustomScrollView的进阶Widget，CustomScrollView由多个 Sliver 进行拼接，以适应更复杂的使用场景，我们将基于 CustomScrollView 进行设计。

从使用角度出发，整个列表由若干个 Section 组成，又将 Section 分为 header、content、footer 三部分，header 为段落的头部，一般可作为 Section 的头部装饰，支持是否吸顶；footer 为段落的尾部，作为 Section 的尾部装饰。列表拥有下拉刷新与加载更多能力；content 为 Section 的正文，支持常见的布局方式：列表、网格、瀑布流以及自定义。Section 的 content 由任意个 cell 组成，cell 即为列表最小粒度的 item。

从 Flutter 原生容器出发，CustomScrollView 支持任意多个 Sliver 的组合，Sliver 提供了 SliverList、SliverGrid、SliverBox 等，已基本符合了我们要求。我们将 Section 的 header 和 footer 各对应一个 SliverBox，content 对应 SliverList 或SliverGrid，再单独为瀑布流布局开发一个 SliverWaterfall；再在整个列表的头部和尾部插入用于刷新加载更多的 Sliver。

我们将 PowerScrollView 分成数据源管理器、控制器、事件回调和刷新配置四大部分。如下图所示。

数据源管理器：用于数据的管理，里面就涉及 Sections 初始化与通常的增删改查。

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

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

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

功能完善

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

自动曝光能力

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

前面我们知道，在 P