一套Flutter混排瀑布流解决方案

一套 Flutter 混排瀑布流解决方案

摘要

流式布局，这是一种当前无论是前端，还是Native都比较流行的一种页面布局。特别是对于商品这样的Feeds流，无论是淘宝，京东，美团，还是闲鱼。都基本上以多列瀑布流进行呈现，容器列数固定，然后每个卡片高度不一，形成参差不齐的多栏布局。

对于Native来说，无论是iOS还是Android，CollectionView和RecyclerView都能满足我们的绝大部分场景了。不过目前闲鱼很多业务场景都是在Flutter上进行实现的，当时Flutter官方只提供了ListView和GridView的实现，没有对瀑布流进行支持。

目前社区中有两个开源的解决方案，分别是WaterFallFlow和FlutterStaggeredGridView。但是在闲鱼的场景中都有一些无法满足的痛点。前者无法支持RecyclerView中StaggeredGridLayoutManager中setFullSpan这样的横跨全屏的横条卡片混排能力能力，后者在不提前预设置卡片高度的情况下有比较严重的性能问题，以及在多Sliver的场景下会有滚动错误的功能性问题。而在目前闲鱼的业务中，无论是搜索结果还是首页的同城页面，都会有混排瀑布流的需求。