【Flutter】熊孩子拆元件系列之拆ListView（十）—— 按自己的方式組裝修改ListView

語言: CN / TW / HK
時間 2021-11-10 11:15:43

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 ，就具體情況具體分析一下，以後再說；

結語

熊孩子拆元件系列結束，現在開始是熊孩子裝元件系列

「其他文章」
「」
「」