學(xué)習(xí)Flutter一段時(shí)間了，特來總結(jié)一下遇到的點(diǎn)點(diǎn)滴滴。如下效果就是我用Flutter重寫的曾經(jīng)項(xiàng)目部分效果，說是部分其實(shí)能看到的就tm的一個(gè)首頁列表。
1、為啥只寫了一個(gè)頁面？
熟悉一個(gè)技能寫一個(gè)頁面怎能體現(xiàn)出來？但是本身時(shí)間有限，作為快速熟悉上手很難一次性完成。
但是我相信你能很好的做出一個(gè)功能頁面，其他的功能還會(huì)是問題嗎？所以作為初試牛刀，入門小結(jié)，我就以此為路線，記錄下遇到的坑坑洼洼。
2、先看下運(yùn)行效果吧
gif動(dòng)圖：
不會(huì)動(dòng)的靜態(tài)圖：
| 圖1 | 圖2 |
|---|---|
 |
 |
OK看仔細(xì)點(diǎn)， 效果看起來是不是還可以？我感覺還行，至少在安卓和蘋果上運(yùn)行起來基本一致。
3、涉及到的知識(shí)點(diǎn)
其實(shí)單看頁面感覺涉及到的東西不多，但背后同時(shí)也隱含了很多。大致歸納下吧；
- 工程及環(huán)境搭建、配置，相信很多人在這里停留了很久；
- android、iOS圖標(biāo)、啟動(dòng)頁等資源相關(guān)的引入及設(shè)置；
- 第三方字體圖標(biāo)的使用、第三方依賴庫的引入和使用,這有具體的描述: Flutter-引入第三方依賴包
- 基于Dio網(wǎng)絡(luò)訪問的操作封裝和數(shù)據(jù)請(qǐng)求；這個(gè)開始很煩，耽誤我不少功夫；
- 導(dǎo)航欄的自定義、列表布局、flex相關(guān)操作；
- 主題樣式配置、局部主題設(shè)置顏色及樣式相關(guān)；
- 時(shí)間日期格式化，頁面間導(dǎo)航跳轉(zhuǎn)、路由相關(guān)；
- 其他系統(tǒng)容器類組件、圖片、文本等組件的使用；
- 自定義了組件、頁面(其實(shí)也是組件)等；
- Dart語言學(xué)習(xí)、Flutter中文檔反反復(fù)復(fù)的去看；
OK，一時(shí)想到的就這些了；放個(gè)工程全貌截圖吧；
4、遇到的問題
別看一個(gè)簡單的開始，遇到的問題太多，多的我都記不清有哪些了，反正佛擋殺佛、鬼擋殺鬼，一切問題直接干就得了；
問題1：導(dǎo)航欄相關(guān)：
系統(tǒng)自帶的導(dǎo)航欄感覺好高，看起來怪怪的，而且在Andorid點(diǎn)擊返回按鈕時(shí)，你還下面提示個(gè)“返回”，感覺很不爽。所以我直接用自定義的了；
問題2：第三方依賴包引入使用問題(Dio)：
這個(gè)不再細(xì)說了，看Flutter-引入第三方依賴包詳細(xì)總計(jì)。
問題3：Dio使用、Charles抓包相關(guān)：
為什么我要抓包了？因?yàn)槲铱吹轿臋n說：
第一感覺，好爽，不用自己處理轉(zhuǎn)化數(shù)據(jù)了；但是按照相關(guān)參數(shù)設(shè)置后，我測試接口返回的還是字符串，還是要自己去json轉(zhuǎn)化。所以我要抓包了看看咋回事；
然后又引入下一個(gè)問題：
按曾經(jīng)的操作、設(shè)備安裝證書、設(shè)置代理、IP等，結(jié)果沒啥反應(yīng)；安卓、蘋果設(shè)備來回?fù)Q都是沒反應(yīng)。證書刪了又裝，總懷疑自己哪里不對(duì)；之前的其他APP在抓就是有結(jié)果的；難道Flutter不支持抓包了？？？
于是一番搜索，知道了：Flutter應(yīng)用抓包的話，代碼中也必須設(shè)置代理；就像這樣：
然后，Charles就一切正常了！
問題4：Tab切換頁面，切回原來的頁面還是重新創(chuàng)建：
bottomNavigationBar: BottomNavigationBar
每次來回切換，網(wǎng)絡(luò)請(qǐng)求都要來一次，這樣真的不好。最后換成iOS風(fēng)格的解決：
return CupertinoTabScaffold(
resizeToAvoidBottomInset: false,
tabBar: CupertinoTabBar(
iconSize: 22,
activeColor: Color.fromARGB(255, 68, 68, 68),
inactiveColor:Color(0xff929292) ,
items: widget._barItem,
), tabBuilder: (ctx , index){
return widget._pageList[index];
});
5、關(guān)于Flutter，我是如何學(xué)習(xí)的？
不少人提到Flutter，不由自主會(huì)說，太難了、門檻太高了、真要入門真是不容易！
還有Flutter的層層嵌套真是惡心人！
學(xué)習(xí)Flutter還要重新學(xué)習(xí)一門Dart語言！
還有說原生不香嗎，F(xiàn)lutter什么Flutter？（這也我無語了，我是要跨平臺(tái)的，你還給說誰香不香，難道我不知道誰香嗎？我們就是要跨平臺(tái)你說怎么整吧？）；
- 我看了一本書<Flutter技術(shù)入門與實(shí)戰(zhàn)>,前前后后看了兩遍，知其大概、了解屬性，組件相關(guān)用法、Dart語法等；
- 不定時(shí)翻閱官方文檔、中文的，看組件用法、手動(dòng)實(shí)踐也想不起了再回來繼續(xù)看；
- 寫一個(gè)頁面，哪怕只有一個(gè)按鈕，只輸出一個(gè)helloworld；
- 原生過來的，轉(zhuǎn)變下思維、特別是布局，彈性盒子模型的思想和H5那里很像，還有一切都是組件。dart嵌套層次多也是事實(shí)，但可以對(duì)代碼抽取再組件、調(diào)用也會(huì)很清爽；
- 不要被傳說嚇到，自己去試了才知道；
6、最后
寫到最后，怎能不放代碼？
GitHub：https://github.com/Light413/dctt_flutter
持續(xù)更新中，喜歡就關(guān)注我吧！有任何問題歡迎指導(dǎo)，十分感謝！
