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

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

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

我認(rèn)為的高效學(xué)習(xí)的方法是，學(xué)習(xí)掌握恰到好處可以開始的基礎(chǔ)知識(shí)，通過操作來(lái)深入學(xué)習(xí)，邊玩邊學(xué)，在這個(gè)過程中發(fā)現(xiàn)自己不懂的部分，通過查閱資料，掌握不懂的知識(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ù)類型的用法，如String、List、int、double、num、bool等。

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

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

如何開發(fā)？

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

從全局出發(fā)，可以發(fā)現(xiàn)是一個(gè)Column（垂直）布局，子組件們按照一定的權(quán)重分配內(nèi)部空間。顯而易見，頂部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，盡管我開發(fā)過數(shù)十個(gè)Android App和微信小程序，但是我很久沒有在完成一個(gè)項(xiàng)目之后如此興奮了，我找回了學(xué)生時(shí)代為了求知而努力學(xué)習(xí)的感覺。在提煉了自己的學(xué)習(xí)方法，并付諸行動(dòng)，得到的收獲讓人難以置信。

項(xiàng)目地址

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(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.juherenli.com/17577.html