1.歡迎來到 Flutter 手勢探索
繼 《Flutter 繪製指南 - 妙筆生花》 小冊之後，經過小半年的業餘時間：從整體構思到程式碼案例實現，從原始碼除錯 到 分析碼字，我的第二本小冊 《Flutter 手勢探索 - 執掌天下》 終於和大家見面了。
2. 想說在前面的話
手勢、繪製、動畫、佈局 四個大部分是介面構成和互動體驗的核心，一切可視的展現、互動的觸發都脫離不了這四者。 Flutter 作為一個優秀的跨平臺框架，但很多人對他並沒有全面的認知，只停留在表面的使用上。如果需求的 UI 表現沒有內建元件 支援，就無法繼續進行，只能找三方庫，找不到的話就只能止步於此。這就很容易達到一個瓶頸期： 繪製不會畫、手勢不太懂、動畫不會做、佈局一團糟。
其實無論是 Flutter 、iOS 、Android 也好，Dart 、Swift、 Koltin 也罷，框架和語言本身都只是 工具 。而作為工具，就必定要服從於人，以致其表現的價值會因使用者的能力而出現雲泥之別。比如說刀，刀因型別不同而作用不同，可削木、可切菜、可解牛、可雕花。但無論是何種刀，都脫離不了 工具 的範疇，而工具的最終目的是為了擴充人的能力，是為了解決問題。這時，人就一定要起到主觀的能動性，經驗和技法 的差異就讓使同樣刀的人，在解決問題時出現優劣之別。
如果一個工具會和你朝夕相伴，或可能成為你飯碗的時候，那你對這個工具再怎麼深入研究都是不為過的，因為我們就是幹這個的。一個演員，臺上三分鐘，臺下十年功。說出流利的臺詞、克服表演中的重重困難、研究各種表現形式，本就是一個演員的本分。如果只是流於表面，那和流量明星 就沒什麼區別。既然是幹這個的，我們自然角色就絕不僅僅是一個使用者，對工具的認識和瞭解，是工具使用者最基礎的能力。
思考是非常重要的過程，這是我們作為人 而言得天獨厚的能力，思之愈甚，得之愈深，人的 經驗 就是在不斷地探索與嘗試中通過思考而凝結的。當完整解決一個問題後，在遇到與之類似的問題時，就會產生自己的預判，分析問題可行性，來初步構想解決方案。自己的經驗是寶貴的，別人的經驗只能是別人的，這也是為什麼我很不喜歡：別人打著 “不懂就問” 的旗號，自詡 “剛剛入門” 為由，只要遇到點問題，就 “不恥下問”。無論是學習還是解決問題，獨立自主的思考永遠都要排在首位，而 求教詢問 一定要建立在自己對為問題的足夠思考和認知之上，以探討的姿態和他人想法交涉，這也是對別人最起碼的尊敬。絕非是一味丟擲問題和索求答案 的粗劣行徑。
3. 手勢操作的價值
對於裝置中的應用而言，手勢 對於可操作性 而言非常重要。試想一下，如果介面無法響應手勢，那很就難與使用者 產生互動。就像門沒有鑰匙孔，電腦沒有鍵盤，是無法完成使用需求的，手勢響應是應用可互動的前提。當然除了手勢事件外，還有很多其他的場景可以觸發事件，比如滑鼠事件、鍵盤事件、語音事件等，不過本冊討論的主體是手指事件。
在一個介面中，小到一個按鈕的點選、核取方塊的選擇，大到白板繪製的控制、視口的滾動，都或多或少存在手勢操作的身影。介面通過事件響應向使用者提供操作的可能性。這些操作絕大多數是由手勢接觸觸發的，無論是單擊、雙擊、長按、拖拽，還是雙指縮放、雙指旋轉、滑動。其根源都是對使用者觸點進行響應，觸發相關邏輯處理。總的來說手勢非常重要，它和應用的關係，就相當於電和電視的關係，沒有電，電視將毫無使用價值。
工具可以產生的價值一半源於工具本身，它為功能實現提供了可能性；還有一半源於使用它的人。Flutter 的手勢響應主要是 GestureDetector 提供的回撥，讓使用者有處理事件的 可能性。工具非常公平，它對於所有人都是一樣的，但它具體可以幹什麼，這完全取決於使用工具的人。其實跳出 Flutter 的侷限，無論是 Android，還是 web 平臺，只要找到對應的工具，那麼人的能力就能施展。就像刀具雖然不同，但是雕刻大師只要找到一把刀，他的經驗和技法就有用武之地。對於廣大的程式設計者而言，語言和框架也僅是工具，它對於所有人都是平等的。而我們的 經驗和技法 就是在解決問題中積累的認知和思想，在讀碼中見證的風采與境界。
4. 小冊內容概述 - 使用層
本冊的整體結構非常簡單，主要圍繞著兩個主題：手勢回撥的使用 和 手勢相關原始碼的探索。其中 1 ~ 6 章 會通過幾個有趣的案例，來講述一下各種手勢回撥如何使用。
豎直拖拽手勢：在第 3 章會實現可隨豎直手勢拖拽而伸縮的彈簧，放手時恢復原長的展示效果。是一個手勢入門體驗的絕佳案例。
點選相關手勢：在第 4 章會通過一個有趣的案例介紹關於點選的事件。比如下面按下時新增一個灰色的圖章；抬起時變為藍色；按下後，如果發生移動，會觸發觸點的取消事件，來去除按下的圖章。如何根據觸點的回撥，來維護介面的資料，使之呈現是一個比較綜合的能力。
繼手勢新增圖章後，我們會逐步實現如下井字棋的案例，包括棋子的勝負判定邏輯。這個案例更為綜合，更能鍛鍊你對資料和邏輯的把握。可以讓你更好地體會到手勢改變資料，資料決定展現的奧義。
拖拽手勢: 在第 5 章，會完成白板繪製的效果。根據按下和抬起維護線段列表，就可以實現手勢移動時的白板繪製。如下，為了有更好的體驗，支援顏色和線寬的選擇。
-
長按手勢：這個白板是逐步完善的，從點收集的優化，到曲線擬合，再到顏色、線寬的選擇，最後到長按拖拽，每個步驟都非常明確，你可以跟著本冊，一步一個腳印，一點點完成。
-
變換手勢：在第 6 章，開始會介紹如下基於scale相關回撥進行的縮放、旋轉、平移變換操作。縮放 旋轉 平移
最終我們將基於前面的畫板和縮放手勢，實現如下可以進行變換的 無限畫板，之所以成為無限，是因為，你可以進行拖拽、縮放、旋轉將畫布移到任意位置去繪製。
5. 小冊內容概述 - 原始碼層
如果你熟悉了這些案例，那麼對 Flutter 手勢使用方面也算爐火純青了。當然本冊並不止於此，我會嘗試去分析整個 Flutter 手勢體系 的原始碼，包括 手勢相關元件、手勢檢測器一族 以及手勢競技相關原始碼的探索。
自己看原始碼是一件非常痛苦的事，大多數人都沒有耐心和能力去深究原始碼的。對於 Flutter 手勢體系來說，我已經體驗完了這些痛苦，現在把我的認知分享出來，著就會更有意義。如果說讀原始碼的本身是夜中行舟，那麼過來人的經驗便是一座燈塔。人類對於世界的認知形成的科學體系，也正是如此一代代地傳承、演進、推翻、昇華的螺旋上升。
原始碼的分析主要分為三個階段：
- 【1】
第 7~8 章介紹GestureDetector元件和RawGestureDetector元件的原始碼實現，並從原始碼中引出手勢識別器GestureRecognizer，推進劇情發展。 - 【2】
第 9~10 章是分別對GestureRecognizer及手勢競技方面的原始碼總覽，作為儲備知識，方便之後除錯分析。這兩個適合在讀完本冊後，重新回讀一遍。 - 【3】
第 11 ~ 15 章是結合原始碼除錯分析的手勢競技核心內容，主要分析了單擊和雙擊兩個手勢檢測器的工作流程，在第 13 章，通過簡單的漫畫場景分析了雙擊和單擊手勢檢測器除錯存在的競爭情況。比如下圖，這樣的場景更容易讓我們形象地認知整個競技的流程。第 15 章探索了Listener元件觸發事件的源頭，能讓我們對 Flutter 中RenderObject的點選測試有個認知，瞭解 Flutter 中的觸點事件是如何分發，Listener元件又是如何響應的。
6. 尾聲
為什麼要寫這本小冊
- 絕大多數人只停留在對
GestureDetector的基本事件響應。通過本冊，我將會結合有趣的案例、原始碼除錯、畫圖分析等方式，讓大家對Flutter 手勢體系有更深入的瞭解。 - 目前並沒有非常系統介紹
Flutter 手勢的專題文章，希望通過本冊，將我的探索收穫分享給大家。 - 稍微深入一些原始碼的文章，發普通的文章總感覺
曲高和寡，關注度比較低，寫成小冊更方便整體傳播。 - 定價一如常往，
3.5元， 賺點錢買飲料、吃飯加個雞腿 ~
致歉
也許有些朋友並不喜歡別人以較高姿態對其進行說教，在此我表示歉意。這裡只是分享一下我的思考與認知，並非什麼絕對的正誤，你可以保留自己觀點，報持自己獨立的思維也是一件非常重要的事。
最後一句：由於純手工碼字以及認知的侷限性，如果本冊內容上有什麼錯誤、疑問、錯別字或修改建議，可在評論區指正，或直接聯絡我進行探討 ~
最後給小冊一個特寫:
END ~
@張風捷特烈 2021 年 05 月 13 日