likes
comments
collection
share

【Flutter】自定义ListView开发记录(二)——设计LayoutManager

作者站长头像
站长
· 阅读数 5

前言

前面简单的处理了一下滑动方式的修改,使用 ListView 实现了类似于覆盖翻页效果的,效果如下:

【Flutter】自定义ListView开发记录(二)——设计LayoutManager

此时的工程项目中就三个类:

【Flutter】自定义ListView开发记录(二)——设计LayoutManager

今天稍微增加几个类,引入layoutManager的概念,将上面覆盖翻页效果的部分抽过来:

引入 LayoutManager 的目的

通过之前的ListView 分析,能得知ListView真正展示内容的部分就是SliverList;

而SliverList 的内容变化是通过layout方法触发的;所以如果想对SliverList进行修改,修改paint或layout是不可避免的部分;

所以我参考Android 的 LayoutManager,试图将piant和layout方法暴露出来,这样就可以通过自定义layoutManager来直接对展示内容进行修改;

LayoutManager的基础粗略版本

按照上面的目的,先从完整的暴露paint 和 layout方法开始;

所以定义一个抽象类,规定paint和layout两个抽象方法:

【Flutter】自定义ListView开发记录(二)——设计LayoutManager

然后规定一下绑定方法,方便使用sliver本身的一些计算方法:

【Flutter】自定义ListView开发记录(二)——设计LayoutManager

RenderListView加入layoutManager的托管,并设置绑定;

【Flutter】自定义ListView开发记录(二)——设计LayoutManager

首先制定一个基础版本的LayoutManager,将 RenderSliverMultiBoxAdaptor 部分的 paint 方法拿过来;来当作一个基本的LayoutManager,起名这块,就叫它——linearLayoutManager吧;

现在把之前的覆盖翻页的LayoutManager也实现出来:

同样的继承重写,但是在具体绘制的时候,仅仅处理可见部分;其他部分直接设置为0,并从后往前循环:

【Flutter】自定义ListView开发记录(二)——设计LayoutManager

最后给SliverList、RenderSliverList、ListView部分都设置上layoutManager,并提供出来;

这样就大功告成~

结语

现在通过修改paint方法,并抽到layoutManager来实现了上面的覆盖翻页效果;

但是是不是可以修改layout方法,让数据源头这块就是符合现实效果的?

然而ListView这块是通过长度来计算缓存的,而非像Android 的 recyclerView那样,通过index进行缓存的,所以如果修改layout方法中的layoutOffset参数的话,会影响到缓存计算~

或许可以再将缓存这部分改成android 中的index缓存形式?