【Flutter】熊孩子拆元件系列之拆ListView(十)—— 按自己的方式組裝修改ListView
theme: condensed-night-purple
「這是我參與11月更文挑戰的第7天,活動詳情檢視:2021最後一次更文挑戰」。
前言
前面對ListView的基本結構,執行方式做了分析,大概“拆解”了一下ListView;
那麼作為一個熊孩子,下一件該做的事,就是重新組裝回去;
當然,不按照自己的想法去改造元件,怎麼能叫熊孩子呢?
熊孩子的想法:
- 首先的想法來自於我以前的一個練手專案——flutter_novel(說來慚愧,已經兩年沒更新了,現在還有人在Star;當初說好的重構,也在一次次加班中被遺忘了):
- 原先的專案中,每個翻頁效果都是獨立的自定義View;現在想依靠一個View,通過切換配置的方式來統一實現;
-
根據上述設計思路,也要要求能夠提供出手勢資料,從而實現根據手勢資訊,對單獨頁面資訊進行修改;
-
可能有人看過我之前的中秋主題投稿,可以說它的實現方式也是魔改ListView,現在也想將這個變換Item、自定義路徑的效果,能提供給ListView;
根據需求,分析一下實現方式:
- 如果想支援通過配置來更改不同的View滑動效果,經過前面的分析,那麼可以從這幾個方向入手:
- 修改ScrollController;通過對手勢事件的處理, 攔截並修改事件為自己需要的事件;
- 修改ViewPort;修改ViewPort中的資料,使展示視窗符合自己要求;
-
修改SliverList;使最終顯示的內容符合要求;
-
提供手勢資料,這個可以在ListView中再插入一個 ChangeNotifier ,在Scrollable 的 setCanDrag 方法中將這個資料存進去;Item則通過of方法獲取這個 ChangeNotifier, 並監聽處理資料;
-
對ListView本身的自定義路徑、變換Item功能的支援,在我之前的文章中,是通過修改SliverList的方式來實現的;這樣做確實能實現功能,但也要注意重寫hitTest方法,將hit結果轉換為變換之後的Item的位置;這個過程就要涉及到之前包裹item的一堆RenderObject這塊的處理;這次考慮一下有沒有更好的方式;
大體的設計思路:
參考android RecyclerView的設計思路,在其中引入LayoutManager的概念;
LayoutManager類似於ListView的childDelegate,傳入到Element層,Element層也會接管RenderObject層的paint、layout、hitTest方法,並傳給LayoutManager處理;
而LayoutManager就需要實現paint、layout、hitTest這塊的方法;
至於將這個LayoutManger 傳給哪個Element和其對應的RenderObject ,就具體情況具體分析一下,以後再說;
結語
熊孩子拆元件系列結束,現在開始是熊孩子裝元件系列
- 【Flutter】小說閱讀器改版 —— 翻頁動畫(三)
- 【Flutter】小說閱讀器改版 (六)—— 在動畫播放中攔截手勢
- 【Flutter】小說閱讀器改版 (五)—— 整合ScrollActivity
- 【Flutter】小說閱讀器改版 (四)—— 讓ScrollActivity追蹤手勢最新位置
- 【Flutter】小說閱讀器改版 (三)—— 實現支援 Drag 的ScrollActivity
- 【Flutter】小說閱讀器改版 (二)—— 改進一下模擬翻頁的效果
- 【Flutter】小說閱讀器改版 (一)—— 模擬翻頁的思路優化
- 【Flutter】自定義ListView開發記錄(五)—— 提供手勢等資訊
- 【Flutter】自定義ListView開發記錄(四)—— 關於ParentData的設想和分析與簡單實踐
- 【Flutter】自定義ListView開發記錄(三)—— 處理HitTest手勢事件
- 【Flutter】自定義ListView開發記錄(二)——設計LayoutManager
- 【Flutter】自定義ListView開發記錄(一)——設計滑動效果的處理方式
- 【Flutter】熊孩子拆元件系列之拆ListView(十)—— 按自己的方式組裝修改ListView
- 【Flutter】熊孩子拆元件系列之拆ListView(九)—— AutomaticKeepAlive和KeepAlive
- 【Flutter】熊孩子拆元件系列之拆ListView(八)—— SliverList的運作機制
- 【Flutter】熊孩子拆元件系列之拆ListView(七)—— SliverList的基礎結構
- 【Flutter】熊孩子拆元件系列之拆ListView(六)—— SliverPadding
- 【Flutter】熊孩子拆元件系列之拆ListView(五)—— ViewPort
- 【Flutter】熊孩子拆元件系列之拆ListView(四)—— _ScrollableScope
- 【Flutter】熊孩子拆元件系列之拆ListView(三)—— GlowingOverscrollIndicator