【Flutter】小說閱讀器改版 (四)—— 讓ScrollActivity追蹤手勢最新位置

語言: CN / TW / HK

theme: condensed-night-purple

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

前言

在上一篇中,實現了讓Item先自動定位到手勢按下的位置,不過還有一個問題:

如果動畫沒結束前就移動手勢,動畫並不會追蹤手勢最新位置,如圖所示:

修改前.gif

現在就來處理下這個問題:

分析

  • 出現這個問題的原因,就是動畫並未根據最新手勢資訊做判斷;所以如果想要根據最新手勢資訊做判斷,首先要做的就是傳入最新手勢;

  • 傳入了手勢資訊,還要能根據手勢資訊,終止或延長動畫;

拓展一下,上面兩點所要求的內容,總結一下就是:

  • 對animteTo方法進行修改,使其不再一直重建AnimationController,並在不影響動畫播放的前提下,傳入最新的手勢資訊;

  • 對於先按下左邊,然後往右滑動的手勢,應該延長動畫,直到追蹤到手指位置;

  • 對於先按下右邊,然後往左滑動的手勢,應該在遇到手指位置的時候,提前終止動畫;

方案

  • 首先,傳入手勢資訊這塊,說白了就是activity正在執行的時候,就僅僅更新終點位置即可,簡單處理快速驗證的話,可以這麼做:

先新建一個方法用於更新目標位置:

image.png

然後animateTo方法判斷一下當前Activity,是自定義的新Activity,就呼叫更新方法:

image.png

  • 對於手勢資訊的處理這塊,我偷懶處理了下:

其實沒必要分別實現上面提到的兩種情況,對於這種全屏Item等寬的情況,手勢的操作最大距離不會超過Item寬度,所以,可以將重點位置再增加個Item寬度,或者說是螢幕寬度,這樣只會存在一種情況,判斷 AnimationCroller的 value 是否小於等於目標值,是的話,那麼就終止動畫,將目標值傳入即可;

首先更改構造器中建立的AnimationController: image.png

然後修改tick方法,在小於的時候終止動畫返回; image.png

結尾

現在看下效果,好像沒啥太大問題了:

修改後.gif

雖說現在通過實現一個新的ScrollActivity的方式來勉強實現了效果;但是細想一下,其實對Drag事件併為做出什麼處理;或者說,現在手勢操作,其實是啟動了DragActivity和自定義的Activity,讓它倆一起執行;

光看UI效果的話,好像沒什麼衝突,但是從程式碼層面,應該是一直在衝突的……這塊的問題需要解決下

「其他文章」