【Flutter】自定義ListView開發記錄(二)——設計LayoutManager

語言: CN / TW / HK

theme: condensed-night-purple

「這是我參與11月更文挑戰的第9天,活動詳情檢視:2021最後一次更文挑戰」。

前言

前面簡單的處理了一下滑動方式的修改,使用 ListView 實現了類似於覆蓋翻頁效果的,效果如下:

QQ20211111-201259-HD.gif

此時的工程專案中就三個類:

image.png

今天稍微增加幾個類,引入layoutManager的概念,將上面覆蓋翻頁效果的部分抽過來:

引入 LayoutManager 的目的

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

而SliverList 的內容變化是通過layout方法觸發的;所以如果想對SliverList進行修改,修改paint或layout是不可避免的部分;

所以我參考Android 的 LayoutManager,試圖將piant和layout方法暴露出來,這樣就可以通過自定義layoutManager來直接對展示內容進行修改;

LayoutManager的基礎粗略版本

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

所以定義一個抽象類,規定paint和layout兩個抽象方法:

image.png

然後規定一下繫結方法,方便使用sliver本身的一些計算方法:

image.png

RenderListView加入layoutManager的託管,並設定繫結;

image.png

首先制定一個基礎版本的LayoutManager,將 RenderSliverMultiBoxAdaptor 部分的 paint 方法拿過來;來當作一個基本的LayoutManager,起名這塊,就叫它——linearLayoutManager吧;

現在把之前的覆蓋翻頁的LayoutManager也實現出來:

同樣的繼承重寫,但是在具體繪製的時候,僅僅處理可見部分;其他部分直接設定為0,並從後往前迴圈:

image.png

最後給SliverList、RenderSliverList、ListView部分都設定上layoutManager,並提供出來;

這樣就大功告成~

結語

現在通過修改paint方法,並抽到layoutManager來實現了上面的覆蓋翻頁效果;

但是是不是可以修改layout方法,讓資料來源頭這塊就是符合現實效果的?

然而ListView這塊是通過長度來計算快取的,而非像Android 的 recyclerView那樣,通過index進行快取的,所以如果修改layout方法中的layoutOffset引數的話,會影響到快取計算~

或許可以再將快取這部分改成android 中的index快取形式?

「其他文章」