淘宝和闲鱼首页实现仿制的记录
本文最后更新于 2021年4月4日 晚上
正好抽出一些时间来看看淘宝和闲鱼首页上的实现, 准备探索一番.
记录
需求: 整个页面由多个块构成, 且最下方的块是一个类似瀑布流布局的可动态加载更多的集合视图样式.(具体可以看淘宝和闲鱼).
Flutter 版: 参考这个链接.
主要利用 Sliver 这个 Widget 实现.
但性能上来说这种解决方案并不适合大量 cell 的情况, 看到闲鱼 app 的上面有一个滑动条改变的过程, 看能不能推导一下思路:
- 滑动条在下方的 GridView 完全占据窗口时, 是长条的
- 当 GridView 完全占据窗口, 就变成很短, 符合 GridView 内部滑动的样式.
故闲鱼 APP 利用的是在一个滚动视图中的下方再放一个滚动视图的方式实现的, 但在 Flutter 中这样的实现应该如何弄?
闲鱼这个的话还需要去了解一下大部分 Widget 的效果先.
闲鱼那种的关键还是一个 sticky header.
要找思路的话, 可以看看 WWDC 的东西.
iOS 版: WWDC 2014 Session 235 有启发, 需要看看.
还有这个库, 简直就是一模一样的.
另外这个库: 链接.
这个链接.
目前看到的解决方案:
通体 CollectionView 的最简单方式, 但无法实现最下方是不同布局的效果.
可以尝试修改 CollectionView 的 layout 达到目的否?
如果用 edgeInset 将上方留出一定空间, 虽然也可以实现效果, 且性能上没有任何问题, 但上方的空间就需要固定高度, 这样是否合理?
淘宝那种, 目前能够想到可行的还是通过多 section 或两个 section 的 UICollectionView 达到目的…
最后要解决的就是通过继承 FlowLayout 实现流式布局, 只要替换之前的 FlowLayout 为可以进行流式布局的 Layout, 则整体就仿制成功了.
在 iOS 端的实现放到了这里.