Flutter最佳入門方式——寫一個計算器

韜( ̄▽ ̄)發表於2018-09-30

工作以來,我在學習新知識的時候,常常與在應試教育階段被傳授的方法作鬥爭——把書本的內容100%複製到腦中才算學會嗎?不會被使用或者不常用的知識,花費大量功夫去記憶才算完美嗎?

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

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

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

為什麼是計算器?

Flutter最佳入門方式——寫一個計算器

  • 佈局經典,能學會使用最重要幾個的Widget用法,迅速掌握常用的佈局,如Container、ListView、Row、Column、Expanded、FractionallySizedBox等等。
  • 樣式簡單,能學會使用最常用的幾個佈局屬性,如padding、color、style、decoration(圓角、描邊)、alignment等等。
  • 有輸入,能學會手勢的捕獲以及元件間的資料流動
  • 有處理,能學會Dart的基本資料型別的用法,如String、List、int、double、num、bool等。
  • 有輸出,能學會何時使用StatelessWidgetStatefulWidget
  • 不依賴UI,不依賴介面,成功執行Hello World就可以立即開發,不要一開始就追求完美,因為它會阻止你行動,要知道「開始做」遠比「做好」重要。

如何開發?

1. 【總】觀察佈局,全域性出發。

Flutter最佳入門方式——寫一個計算器
從全域性出發,可以發現是一個Column(垂直)佈局,子元件們按照一定的權重分配內部空間。顯而易見,頂部Text的權重為2(flex:2),其餘子元件ListView和Row的權重均為1(flex:1)。

2. 【分】拆分元件,逐個擊破。

拆分元件,可以按照業務邏輯拆分,也可以按照佈局是否相同來拆分,在這裡筆者選擇的是按照佈局是否相同來進行拆分,原因是業務邏輯並不複雜,佈局可以複用的地方更多。如圖所示,以NumberButton元件及NumberButtonGroup元件為例:

Flutter最佳入門方式——寫一個計算器

3. 【總】整合元件,理清邏輯。

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

Flutter最佳入門方式——寫一個計算器

最後

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

專案地址

相關文章