Flutter最佳入門--計算器

Flutter的入門文檔給予了我很大的啟發，它并沒有把API文檔或者是整個框架的內容直接展現給初學者，而是通過一個簡單的計數器例子，從基礎的組件到手勢的監聽，再到狀態的改變，將Flutter最核心的思想展現的淋漓盡致。

我見過許多初學者，喜歡先將入門文檔、API文檔和教學視頻一字不漏地全部看完，卻從來沒有打開編輯器，哪怕寫上一句Hello World。

我認為的高效學習的方法是，學習掌握恰到好處可以開始的基礎知識，通過操作來深入學習，邊玩邊學，在這個過程中發現自己不懂的部分，通過查閱資料，掌握不懂的知識，最后將所學知識從大腦中提取出來，以別人能夠理解的方式教授給別人。

為什么是計算器？

布局經典，能學會使用最重要幾個的Widget用法，迅速掌握常用的布局，如Container、ListView、Row、Column、Expanded、FractionallySizedBox等等。

樣式簡單，能學會使用最常用的幾個布局屬性，如padding、color、style、decoration（圓角、描邊）、alignment等等。

有輸入，能學會手勢的捕獲以及組件間的數據流動。

有處理，能學會Dart的基本數據類型的用法，如String、List、int、double、num、bool等。

有輸出，能學會何時使用StatelessWidget和StatefulWidget。

不依賴UI，不依賴接口，成功運行Hello World就可以立即開發，不要一開始就追求完美，因為它會阻止你行動，要知道「開始做」遠比「做好」重要。

如何開發？

1. 【總】觀察布局，全局出發。

從全局出發，可以發現是一個Column（垂直）布局，子組件們按照一定的權重分配內部空間。顯而易見，頂部Text的權重為2（flex:2），其余子組件ListView和Row的權重均為1（flex:1）。

2. 【分】拆分組件，逐個擊破。

拆分組件，可以按照業務邏輯拆分，也可以按照布局是否相同來拆分，在這里筆者選擇的是按照布局是否相同來進行拆分，原因是業務邏輯并不復雜，布局可以復用的地方更多。如圖所示，以NumberButton組件及NumberButtonGroup組件為例：

3. 【總】整合組件，理清邏輯。

實現每一部分的組件之后，就要回到整體的計算器邏輯，即如何完成輸入->處理->輸出？

最后

實際上，這是我第一個完整完成的Flutter App，盡管我開發過數十個Android App和微信小程序，但是我很久沒有在完成一個項目之后如此興奮了，我找回了學生時代為了求知而努力學習的感覺。在提煉了自己的學習方法，并付諸行動，得到的收獲讓人難以置信。

項目地址

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://m.junxiaosheng.cn/17577.html