Flutter最佳入門--計算器

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

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

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

為什么是計算器？

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

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

有輸入，能學(xué)會手勢的捕獲以及組件間的數(shù)據(jù)流動。

有處理，能學(xué)會Dart的基本數(shù)據(jù)類型的用法，如String、List、int、double、num、bool等。

有輸出，能學(xué)會何時使用StatelessWidget和StatefulWidget。

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

如何開發(fā)？

1. 【總】觀察布局，全局出發(fā)。

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

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

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

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

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

最后

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

項目地址

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/17577.html