25.Flutter的ListView監(jiān)聽滾動事件之ScrollController

對于滾動的視圖，我們經(jīng)常需要監(jiān)聽它的一些滾動事件，在監(jiān)聽到的時候去做對應(yīng)的一些事情。

創(chuàng)新互聯(lián)建站主營市中網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,App定制開發(fā),市中h5微信平臺小程序開發(fā)搭建,市中網(wǎng)站營銷推廣歡迎市中等地區(qū)企業(yè)咨詢

比如視圖滾動到底部時，我們可能希望做上拉加載更多；

比如滾動到一定位置時顯示一個回到頂部的按鈕，點擊回到頂部的按鈕，回到頂部；

比如監(jiān)聽滾動什么時候開始，什么時候結(jié)束；

在Flutter中監(jiān)聽滾動相關(guān)的內(nèi)容由兩部分組成：ScrollController和ScrollNotification。

ScrollController

在Flutter中，Widget并不是最終渲染到屏幕上的元素（真正渲染的是RenderObject），因此通常這種監(jiān)聽事件以及相關(guān)的信息并不能直接從Widget中獲取，而是必須通過對應(yīng)的Widget的Controller來實現(xiàn)。

ListView、GridView的組件控制器是ScrollController，我們可以通過它來獲取視圖的滾動信息，并且可以調(diào)用里面的方法來更新視圖的滾動位置。

另外，通常情況下，我們會根據(jù)滾動的位置來改變一些Widget的狀態(tài)信息，所以ScrollController通常會和StatefulWidget一起來使用，并且會在其中控制它的初始化、監(jiān)聽、銷毀等事件。

我們來做一個案例，當(dāng)滾動到1000位置的時候，顯示一個回到頂部的按鈕：

jumpTo(double offset)、animateTo(double offset,...)：這兩個方法用于跳轉(zhuǎn)到指定的位置，它們不同之處在于，后者在跳轉(zhuǎn)時會執(zhí)行一個動畫，而前者不會。

ScrollController間接繼承自Listenable，我們可以根據(jù)ScrollController來監(jiān)聽滾動事件。

flutter 中監(jiān)聽滑動事件

在移動端，各個平臺或 UI 系統(tǒng)的原始指針事件模型基本都是一致，即：一次完整的事件分為三個階段：手指按下、手指移動、和手指抬起，而更高級別的手勢（如點擊、雙擊、拖動等）都是基于這些原始事件的。

Flutter 中可以使用 Listener widget 來監(jiān)聽原始觸摸事件，它也是一個功能性 widget。

Listener 的常見屬性

用法如下：

加載更多需要對 ListView 進行監(jiān)聽，所以需要進行監(jiān)聽器的設(shè)置，在 State 中進行監(jiān)聽器的初始化。

2、使用上述的 Listener 來監(jiān)聽，通過 Listener 的 onPointerMove（手指在屏幕上滑動）來監(jiān)聽滑動的距離，當(dāng)滑動到底部時加載更多數(shù)據(jù)

flutter源碼系列 PageView源碼分析以及監(jiān)聽事件

最近一個項目要實現(xiàn)可以無限循環(huán)的PageView，主要思路是在初始化pageview的list的時候在開始和結(jié)尾多加一個結(jié)尾和開頭的widget，當(dāng)滑動到開頭和結(jié)尾的時候手動進行頁面的切換，詳細(xì)可以搜索pageview無限輪播。

這種方法有一個要點就是要維護兩個索引，一個是內(nèi)部list的索引，一個是外部顯示的索引，由于list的容量是比顯示的數(shù)量多2的，所以如果要在外部進行一些比如指示器或者計時器功能要進行和頁面同步顯示或者切換頁面操作時，需要將顯示的索引轉(zhuǎn)換成list的索引。

不過網(wǎng)上說的都是一些比較簡單的實現(xiàn)，看到比較多的就是當(dāng)滑動到要手動切換的時候進行一個時延，這樣可以避免直接切換頁面造成的卡頓和跳動現(xiàn)象。但是存在一個問題，如果要同時實現(xiàn)一個跟隨頁面切換的指示器，就會出現(xiàn)當(dāng)頁面切換過去之后指示器才會跟著過去，因為頁面切換的時候執(zhí)行了時延，而時延之后才會真正改變索引，此時才會setstate，之后指示器才能響應(yīng)到索引的切換，但是如果在時延之前就切換的話又會出現(xiàn)指示器先行的情況。因此這種方法其實是存在一些問題的。

所以解決這個問題的關(guān)鍵在于如何進行頁面切換的判斷。這里可以有兩種思路實現(xiàn)，第一種是實現(xiàn)viewpage的onpagechanged方法，在里面進行邏輯的判斷，然后用controller來進行頁面跳轉(zhuǎn)，不過這種方法存在當(dāng)controller跳轉(zhuǎn)的時候又會回調(diào)onpagechanged，所以就會出現(xiàn)多次對索引不必要操作，而且如果有比如計時器等額外的功能的話可能不方便將頁面邏輯分開，而且依舊無法解決指示器延遲問題，同時也很難進行細(xì)粒度的操作。

第二種方法我們就要去看pageview的源碼了，從源碼的角度來解決問題才是正確的方法。首先我們點進去pageview的源碼

看到這里其實已經(jīng)有一些思路了，我們之前難點在于重寫了onpagechanged方法導(dǎo)致問題無法很好的解決，現(xiàn)在我們找到了onpagechanged調(diào)用的地方，只要找辦法避免掉就可以實現(xiàn)了。

當(dāng)然這里我們要說到NotificationListener，以及flutter對應(yīng)的冒泡事件傳輸機制，這里大家可以去看看這篇 文章 。

我來總結(jié)一下，其實就是flutter對于notification這個組件，有一中事件規(guī)則叫冒泡傳遞，底層的notification如果在它的 onNotification寫的邏輯中返回是false以及它不是根結(jié)點，就會去向上遍歷尋找它的祖先notification組件，知道遇到root節(jié)點或者某一個返回true，則事件傳遞結(jié)束。

而且在onNotification中可以對多種事件進行監(jiān)聽和處理，所以我們可以把對viewpage頁面跳轉(zhuǎn)對索引處理的邏輯寫在這里，而且我們可以分別處理比如滑動開始的start事件和結(jié)束的end事件，分別進行細(xì)粒度的邏輯的處理，這樣就可以在外部進行操作和別的功能實現(xiàn)了。

因此不僅無限輪播事件可以通過這種方法來解決，如果有其他的操作也可以這樣進行處理，而且因為我們沒有傳入onpagechanged方法，所以不存在多次調(diào)用的問題，pageview那里判斷onpagechanged是null方法就不會進去了，會直接我們寫在pageview外面的notification的邏輯。

最后的結(jié)構(gòu)大概這樣