【Flutter】小說閱讀器改版 (三)—— 實現支援 Drag 的ScrollActivity
theme: condensed-night-purple
「這是我參與11月更文挑戰的第15天,活動詳情檢視:2021最後一次更文挑戰」。
前言
之前一篇文章中,遇到了一個問題:
由於controller的animateTo事件會觸發ScrollPosition呼叫beginActivity(DrivenScrollActivity()),進而中斷掉drag事件;
想了一下,決定用自定義ScrollActivity的方式來處理這個問題;
先看下原始碼中的實現方式:
在ListView中,animateTo方法所做的事很簡單:
說白了就是呼叫position去處理;
而position所做的事,是將任務交給scrollActivity處理:
而這個scrollActivity,也不復雜,說白了就是通過 AnimationController 計算,並不斷將結果setPixels;最後呼叫一下 goBallistic、goIdle來複位;
好像沒啥複雜的東西…………寫個新的也不難搞;
實現方式
實現方式這塊,好像要改動的東西也不多:
-
對新的ScrollActivity而言,相容drag所做的事也不復雜:判斷一下 delegate ,也就是ScrollPosition, 看下它持有的currentDrag是否為空,如果為空的話,跟現在的DrivenScrollActivity一模一樣;不為空的話,所做的事就是在結束的時候不呼叫goIdle或者goBallistic復位壞事;
-
動畫這塊,對beginActivity 進行下修改,判斷一下是否需要清除Drag;
根據以上的思路,我新建了一個ScrollController和ScrollPosition;以及一個新的ScrollActivity基類。用於儲存是否需要中斷drag的判斷;
ScrollController:
ScrollPosition:
ScrollPosition這塊,因為好多東西都是私有的……只能完全複製ScrollPositionWithSingleContext這個,然後自己根據需要修改;
ScrollActivity:
結尾
簡單修改了下,好像效果還可以?
不過好像偏移量多計算了一個viewPort,這個是小問題~
不過有個大問題,按照小米閱讀上的效果,即使移動動畫沒結束前就移動手指,最終也能很流暢的跟蹤到最終手指停留的位置;而現在,如果在動畫未結束前一直移動手指,動畫會一直不會開始~
至於原因,也很簡單,每次滑動手指,都會觸發animateTo方法,而一直滑動就會一直觸發,AnimationController 也會一直銷燬重建,無法真正執行起來;
看來接下來要對 AnimationController 的計算方式做些修改?或許應該脫離現在這種from和to的限制,固定一個時間和距離、速度,最後不斷判斷是否到達規定終點,提前結束這種計算方式?
- 【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