Flutter交互實戰－即刻App探索頁下拉＆拖拽效果
前言
Flutter最近比較熱門，但是Flutter成體系的文章並不多，前期避免不了踩坑；我這篇文章主要介紹如何使用Flutter實現一個比較複雜的手勢交互，順便分享一下我在使用Flutter過程中遇到的一些小坑，減少大家入坑；
作者：HitenDev
鏈接：https://www.jianshu.com/p/4d1e81ab3f54
image
先睹為快
本項目支持ios&android運行，效果如下
image
image
image
image對了，順便分享一下生成gif的小竅門，建議用手機自帶錄屏功能導出mp4文件到電腦，然後電腦端用ffmpeg命令行處理，控制gif的質量和文件大小，我的建議是解析度控制在270p，幀率在10左右；
交互分析
看文章的小夥伴最好能手持即刻App，親自體驗一下探索頁的交互，是黃色Logo黃色主題色的即刻；有人稱『黃即』；
image即刻App原版功能有卡片旋轉，卡片撤回和卡片自動移除，時間關係暫時沒有實現，但核心的功能都在；
從一個Android開發者的習慣來看待，這個交互可拆分內外兩層控制項，外層我們需要一個整體下拉的控制項，我稱為下拉控制項；內層我們需要實現一個上、下、左、右四方向拖拽移動的控制項，我們稱為卡片控制項；下拉控制項和卡片控制項不僅要處理手勢，還需要處理子Widget的佈局；下面我再分析細節功能：
下拉控制項：
- 子控制項從上到下豎直擺放，頂部菜單默認隱藏在屏幕外
- 下拉手勢所有子控制項下移，菜單視覺差效果
- 支持點擊自動展開、收起效果
卡片控制項
- 卡片層疊佈局，錯落有致
- 最上層卡片支持手勢拖拽
- 其他卡片相應拖拽小幅位移
- 鬆手移除卡片
碼上入手
熱身
套用App開發伎倆，實現上面的交互無非就是控制項佈局和手勢識別。當然Flutter開發也是這些套路，只不過萬物皆是Widget，在Flutter中常用的基本佈局有Column、Row、Stack等，手勢識別有Listener、GestureDetector、RawGestureDetector等，這是本文重點講解的控制項，不限於上面這幾個Widget，因為Flutter提供的Widget太多了，重點的控制項需要牢記外，其他時候真是現用現查；
所以下面我們從佈局和手勢這兩個大的技術點，來一一擊破功能點；
佈局擺放
這裡所謂的佈局，包括Widget的尺寸大小和位置的控制，一般都是父Widget掌管子Widget的命運，Flutter就是一層一層Widget嵌套，不要擔心，下面從外到內具體案例講解；
下拉控制項
首先我們要實現最外層佈局，效果是：子Widget豎直擺放，且最上面的Widget默認需要擺放在屏幕外；
image如上圖所示，紅色區域是屏幕範圍，header是頭部隱藏的菜單佈局，content是卡片佈局的主體；
先說入的坑
豎直佈局我最先想到的是Column，我想要的效果是content高度和父Widget的高度一致，我首先想到是讓Expanded包裹content，結果是content的高度永遠等於Column高度減header高度，造成現象就是content高度不填充，或者是擠壓現象，如果繼續使用Colunm可能就得放棄Expanded，手動給content賦值高度，沒準是個辦法，但我不願意手動賦值content的高度，太不優雅了，最後果斷棄用Column；
另一個問題是如何隱藏header，我想到兩種方案：
- 採用外層Transform包裹整個佈局，內層Transform包裹header，然後賦值內層dy = -headerHeight，隨著手勢下拉動態，並不改變header的Transform，而是改變最外層Transform的dy；
- 動態改變header高度，初始高度為0，隨著手勢下拉動態計算；
但是上面這兩種都有坑，第一種方式會影響控制項的點擊事件，onTap方法不會被回調；第二種由於高度在不斷改變，會影響header內部子Widget的佈局，很難做視覺差的控制；
最終方案
最後採用Stack來佈局，通過Stack配合Positioned，實現header佈局在屏幕外，而且可以做到讓content佈局填充父Widget;
PullDragWidget
image.png首先解釋一下Positioned的基本用法，top、bottom、height控制高度和位置，而且兩兩配合使用，top和bottom可以理解成marginTop和marginBottom，height顧名思義是直接Widget的高度，如果top配置bottom，意味著高度等於parentHeight-top-bottom，如果top/bottom配合height使用，高度一般是固定的，當然top和bottom是接受負數的；
再分析代碼，首先_offsetY是下拉距離，是一個改變的量初始值為0，content需要設置top = _offsetY和bottom = -_offsetY，改變的是上下位置，高度不會改變；同理，header是採用top和height控制，高度固定，只需要動態改變top即可；
用Flutter寫佈局真的很簡單，我極力推崇使用Stack佈局，因為它比較靈活，沒有太多的限制，用好Stack主要還得用好Positioned，學好它沒錯；
卡片控制項
卡片實現的效果就是依次層疊，錯落有致，這個很容易想到Stack來實現，當然有了上面踩坑，用Stack算是很輕鬆了；
image重疊的效果使用Stack很簡單，錯落有致的效果實在起來可能性就比較多了，比如可以使用Positioned，也可以包裹Container改變margin或者padding，但是考慮到角度的旋轉，我選擇使用Transform，因為Transform不僅可以玩轉位移，還有角度和縮放等，其內部實際上是操作一個矩陣變換；Transform挺好用，但是在Transform多層嵌套的某些特殊情況下，會存在不響應onTap事件的情況，我想這應該是Transform的bug，拖拽事件暫時沒有發現問題，這個是不是bug有待確認，暫時不影響使用；
CardStackWidget
_CardWidget
簡單總結一下卡片佈局代碼，CardStackWidget是管理卡片Stack的父控制項，負責對每個卡片進行佈局，_CardWidget是對單獨卡片內部進行佈局，總體來說沒有什麼難點，細節控制邏輯是在對上層_CardWidget和底層_CardWidget偏移量的計算；
佈局的內容就講這麼多，整體來說還是比較簡單，所謂的有些坑也不一定算是坑，只是不適應某些應用場景罷了；
手勢識別
Flutter手勢識別最常用的是Listener和GestureDetector這兩個Widget，其中Listener主要針對原始觸摸點進行處理，GestureDetector已經對原始觸摸點加工成了不同的手勢；這兩個類的方法介紹如下；
Listener
image.pngGestureDetector手勢回調：
image.pngListener和GestureDetector如何抉擇，首先GestureDetector是基於Listener封裝，它解決了大部分手勢衝突，我們使用GestureDetector就夠用了，但是GestureDetector不是萬能的，必要時候需要自定義RawGestureDetector；
另外一個很重要的概念，Flutter手勢事件是一個從內Widget向外Widget的冒泡機制，假設內外Widget同時監聽豎直方向的拖拽事件onVerticalDragUpdate，往往都是內層控制項獲得事件，外層事件被動取消；這樣的概念和Android父佈局攔截機制就完全不同了；
雖然Flutter沒有外層攔截機制，但是似乎還有一線希望，那就是IgnorePointer和AbsorbPointerWidget，這倆哥們可以忽略或者阻止子Widget樹不響應Event；
手勢分析
基本原理介紹完了，接下來分析案例交互，上面說了我把整體佈局拆分成了下拉控制項和卡片控制項，分析即刻App的拖拽的行為：當下拉控制項沒有展開下拉菜單時，卡片控制項是可以相應上、左、右三個方向的手勢，下拉控制項只相應一個向下方向的手勢；當下拉菜單展開時，卡片不能相應任何手勢，下拉控制項可以相應豎直方向的所有事件；
image上圖更加形象解釋兩種狀態下的手勢響應，下拉控制項是父Widget，卡片控制項是子Widget，由於子Widget能優先響手勢，所以在初始階段，我們不能讓子Widget響應向下的手勢；
由於GestureDetector只封裝水平和豎直方向的手勢，且兩種手勢不能同時使用，我們從GestureDetector源碼來看，能不能封裝一個監聽不同四個方向的手勢，；
GestureDetector
GestureDetector最終返回的是RawGestureDetector，其中gestures是一個map，豎直方向的手勢在VerticalDragGestureRecognizer這個類；
VerticalDragGestureRecognizer
VerticalDragGestureRecognizer繼承DragGestureRecognizer，大部分邏輯都在DragGestureRecognizer中，我們只關注重寫的方法：
- _hasSufficientPendingDragDeltaToAccept方法是關鍵邏輯，控制是否接受該拖拽手勢
- _getDeltaForDetails返回拖拽進度的dx、dy偏移量
- _getPrimaryValueFromOffset返回單方向手勢value，不同方向(同時擁有水平和豎直)的可以傳null
- _isFlingGesture是否該手勢的Fling行為
自定義DragGestureRecognizer
想實現接受三個方向的手勢，自定義DragGestureRecognizer是一個好的思路；我希望接受上、下、左、右四個方向的參數，根據參數不同監聽不同的手勢行為，照葫蘆畫瓢自定義一個接受方向的GestureRecognizer：
DirectionGestureRecognizer
可參考原Demo
由於DragGestureRecognizer的很多方法是私有的，想重新只能copy一份代碼出來，然後重寫主要的方法，根據不同入參處理不同的手勢邏輯；
注意事項
敲黑板了，在自定義DragGestureRecognizer時：_getDeltaForDetails返回值表示dx和dy的偏移量，在只存在水平或者只存在豎直方向的情況下，需要將另一個方向的dx或dy置0；
當前Widget樹有且只存在一個手勢時，手勢判斷的邏輯_hasSufficientPendingDragDeltaToAccept可能不會被調用，這時候一定要重寫_getDeltaForDetails控制返回dx和dy；
如何使用
自定義的DirectionGestureRecognizer可以配置left、right、up、down四個方向的手勢，而且支持不同方向的組合；
比如我們只想監聽豎直向下方向，就創建DirectionGestureRecognizer(DirectionGestureRecognizer.down)的手勢識別；
想監聽上、左、右的手勢，創建DirectionGestureRecognizer(DirectionGestureRecognizer.left | DirectionGestureRecognizer.right | DirectionGestureRecognizer.up)的手勢識別；
DirectionGestureRecognizer就像一把磨刀石，刀已經磨鋒利，砍材就很輕鬆了，下面進行控制項的手勢實現；
下拉控制項手勢
PullDragWidget
image.png
PullDragWidget是下拉拖拽控制項，根Widget是一個RawGestureDetector用來監聽手勢，其中gestures支持向下拖拽和點擊兩個手勢；當下拉控制項處於_opened狀態說header已經拉下來，此時配合IgnorePointer，禁用子Widget所有的事件監聽，自然內部的卡片就相應不了任何事件；
卡片控制項手勢
同下拉控制項一樣，卡片控制項只需要監聽其餘三個方向的手勢，即可完成任務：
CardStackWidget
手勢答疑
- 為什麼不用 onPanDown onPanUpdate onPanEnd 來拖動？
這是掘金評論提的問題，我解答一下：在GestureDetector中有Pan手勢和Drag手勢，這兩個手勢都能用處拖拽的場景，但不同的是Drag手勢僅限於水平和豎直方向的監聽，Pan手勢不約束方向任意方向都能監聽，除此之外觸發條件也不一致，Pan手勢的觸發條件是滑動動屏幕的距離distance大於kTouchSlop2，Drag手勢的觸發條件是dx或者dy大於kTouchSlop，dx、dy和distance形成勾股定理的三個邊長；假設同樣在監聽豎直滑動這種場景，VerticalDrag總是比Pan先觸發；如果下拉控制項用VerticalDrag卡片控制項用Pan，下拉控制項會優先獲取向上的拖拽，卡片控制項就會失去向上拖拽的機會，這就實現不了交互了，退一步即使Pan的觸發條件跟VerticalDrag*一樣，由於Flutter的事件傳遞是從內到外的，這會導致外層下拉控制項完全失去響應機會。以上我的個人理解，如有誤導還請大佬評論指正。
手勢小結
分析Flutter手勢冒泡的特性，父Widget既沒有響應事件的優先權，也沒有監聽單獨方向（left、right 、up 、down）的手勢，只能自己想辦法自定義GestureRecognizer，把原本Vertical和Horizontal兩個方向的手勢識別擴展成left、right、up 、down四個方向，區分開會產生衝突的手勢；
當然也可能有其他的方案來實現該交互的手勢識別，條條大路通羅馬，我只是拋磚引玉，大家有好的方案可以積極留言提出寶貴意見；
總結
知識點
由於篇幅有限並沒有介紹完該交互的所有內容，深表遺憾，總結歸納一下代碼中用到的知識點：
- Column、Row、Expanded、Stack、Positioned、Transform等Widget的使用；
- GestureDetector、RawGestureDetector、IgnorePointer等Widget的使用；
- 自定義GestureRecognizer實現自定義手勢識別；
- AnimationController、Tween等動畫的使用；
- EventBus的使用；
最後
上面章節主要介紹在當前場景下用Flutter佈局和手勢的實戰技巧，其中更深層次手勢競技和分發的源碼級分析，有機會再做深入學習和分享；
另外本篇並不是循序漸進的零基礎入門，對剛接觸的同學可能感覺有點懵，但是沒有關係，建議你clone一份代碼跑起來效果，沒準就能提起自己學習的興趣；
最最後，本篇所有代碼都是開源的，你的點贊是對我最大的鼓勵。
項目地址：
https://github.com/HitenDev/FlutterDragCard
閱讀更多
一波Flutter酷炫特效來襲
金三銀四，2019最新面試實戰總結
從來不糾結演算法，冒泡排序這樣優化？
動畫：一招學會TCP的三次握手和四次揮手
關於Gradle， 搞定Groovy閉包這一篇就夠了
推薦閱讀：
