用Flutter實現一個仿“探探”的左右滑動選擇喜歡/不喜歡的效果

  寫在前面，效果已經基本OK了，但是有些細節還沒處理好。暫時主要有三個問題：

• 使用者手勢到達螢幕邊緣時釋放，如果旋轉角度過小，動畫總感覺有些不流暢（也可能是我的錯覺吧）；
• 給資料重新整理提供的API還沒想好，現在塞資料比較麻煩；
• 因為UI設計是根據使用者手勢移動佈局位置的，因此使用者每次手勢位置改變，都需要重新整理佈局，現在是用setState的方式去重新整理的，不清楚在佈局複雜的情況下是否會有效能問題。

  支援無限重新整理。

程式碼：github.com/yumi0629/Fl…

效果圖：

整體思路

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

  下層Widget在上層佈局移出螢幕時，會縮小至原大小，縮小動畫結束時，上下Widget的大小是一致的，因此此時直接將螢幕外的上層佈局瞬間移回，使用者在視覺上並不會察覺。此時的上層佈局就是一個假的“第二層”，而原來的下層佈局就變成了假的“第三層”，如此反覆，形成了無限迴圈。

  要注意，因為有旋轉動畫的存在，上層佈局的實際移動距離應該比控制元件左上角至螢幕右邊緣的距離（右滑時）更大一些，具體為圖中黑色標記的距離。但是，我並沒有算的這麼精確，實際移動距離選擇了一個比較靠近的值（因為我覺得，問題不大～）。

什麼時候重新整理資料

  預設上層佈局展示第1條資料，下層佈局展示第2條資料；在上層佈局移出螢幕時，就可以重新整理上層佈局，展示第2條資料了，對應的回撥監聽為onSlideCompleted；在下層佈局縮小動畫完成，上層佈局瞬間移回原位置後，下層佈局重新整理資料，展示第3條資料，對應的回撥監聽為refreshBelow。

底部喜歡/不喜歡圖示的動畫實現

  跟下層佈局一樣，也是接收上層佈局動畫的進度值，來實現隨著使用者手勢而放大+改變顏色的效果。放大至峰值後，再自行進行一個縮小動畫，縮小至原大小。

  上層監聽使用者手勢的Widget，修改自之前寫QQ側滑選單時的側滑控制元件：Flutter：手把手教你實現一個仿QQ側滑選單的功能，怎麼監聽使用者的手勢在那篇文章裡寫的很清楚，就不贅述了。

  最後，感謝 Q群：Flutter中文使用者組 中各位大佬對我的思路提點，給我提供了將上層佈局直接移回，製作一個假的佈局的方案，解決了困擾我很久的上層佈局移出後該放在哪裡的問題。