寫在前面,效果已經基本OK了,但是有些細節還沒處理好。暫時主要有三個問題:
- 使用者手勢到達螢幕邊緣時釋放,如果旋轉角度過小,動畫總感覺有些不流暢(也可能是我的錯覺吧);
- 給資料重新整理提供的API還沒想好,現在塞資料比較麻煩;
- 因為UI設計是根據使用者手勢移動佈局位置的,因此使用者每次手勢位置改變,都需要重新整理佈局,現在是用setState的方式去重新整理的,不清楚在佈局複雜的情況下是否會有效能問題。
支援無限重新整理。
效果圖:

整體思路
上層是一個支援使用者手勢監聽的Widget,隨著使用者的手勢進行平移+旋轉變換;下層Widget雖然不支援手勢監聽,但是會接收上層佈局的動畫進度回撥,進行放大,因此看起來也是跟隨著手勢的:



什麼時候重新整理資料
預設上層佈局展示第1條資料,下層佈局展示第2條資料;在上層佈局移出螢幕時,就可以重新整理上層佈局,展示第2條資料了,對應的回撥監聽為onSlideCompleted
;在下層佈局縮小動畫完成,上層佈局瞬間移回原位置後,下層佈局重新整理資料,展示第3條資料,對應的回撥監聽為refreshBelow
。
底部喜歡/不喜歡圖示的動畫實現
跟下層佈局一樣,也是接收上層佈局動畫的進度值,來實現隨著使用者手勢而放大+改變顏色的效果。放大至峰值後,再自行進行一個縮小動畫,縮小至原大小。
上層監聽使用者手勢的Widget,修改自之前寫QQ側滑選單時的側滑控制元件:Flutter:手把手教你實現一個仿QQ側滑選單的功能,怎麼監聽使用者的手勢在那篇文章裡寫的很清楚,就不贅述了。
最後,感謝 Q群:Flutter中文使用者組 中各位大佬對我的思路提點,給我提供了將上層佈局直接移回,製作一個假的佈局的方案,解決了困擾我很久的上層佈局移出後該放在哪裡的問題。