Flutter最佳入門(mén)--計(jì)算器

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

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

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

為什么是計(jì)算器？

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

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

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

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

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

不依賴(lài)UI，不依賴(lài)接口，成功運(yùn)行Hello World就可以立即開(kāi)發(fā)，不要一開(kāi)始就追求完美，因?yàn)樗鼤?huì)阻止你行動(dòng)，要知道「開(kāi)始做」遠(yuǎn)比「做好」重要。

如何開(kāi)發(fā)？

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

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

2. 【分】拆分組件，逐個(gè)擊破。

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

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

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

最后

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

項(xiàng)目地址

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