Flutter 網(wǎng)絡(luò)請(qǐng)求類封裝及搜索框?qū)崿F(xiàn)

在 Flutter 中定時(shí)器相對(duì) iOS 來(lái)說(shuō)比較好的一點(diǎn)就是定時(shí)器事件的執(zhí)行不會(huì)受視圖拖拽的影響，不涉及到模式。但是需要注意一點(diǎn)的是在頁(yè)面離開(kāi)的時(shí)候要對(duì)定時(shí)器進(jìn)行銷毀。

成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為海滄等服務(wù)建站，海滄等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為海滄企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

開(kāi)始的時(shí)候我們是在頁(yè)面中直接使用三方框架 http 進(jìn)行網(wǎng)絡(luò)的請(qǐng)求，這里不好的一點(diǎn)就是如果將來(lái)我們更換了網(wǎng)絡(luò)請(qǐng)求框架的話，項(xiàng)目中涉及到網(wǎng)絡(luò)的請(qǐng)求的地方都需要改動(dòng)，對(duì)項(xiàng)目的影響會(huì)比較大。所以這里我們自己封裝了一個(gè)網(wǎng)絡(luò)請(qǐng)求類，定義自己的網(wǎng)絡(luò)請(qǐng)求方法，即使將來(lái)更換三方框架的話，我們只需要在我們自己網(wǎng)絡(luò)請(qǐng)求類里面更換就好，項(xiàng)目的其他地方不用改動(dòng)。對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行封裝，相信不管是 iOS 項(xiàng)目還是安卓項(xiàng)目肯定也都是這樣做的。

這里我們是基于 Dio 這個(gè)三方框架進(jìn)行封裝的，在 HttpManager 類中我們定義了 Dio 的單例對(duì)象 _dioInstance ，通過(guò)單例方法 _getDioInstance 來(lái)獲取單例對(duì)象。我們定義了 post 跟 get 兩個(gè)靜態(tài)方法，在這兩個(gè)方法中我們都調(diào)用了私有方法 _sendRequest ， _sendRequest 方法中通過(guò)該傳入的枚舉參數(shù) HttpMethod 來(lái)區(qū)分 Dio 單例對(duì)象是調(diào)用 get 還是 post 請(qǐng)求。這里需要注意的是方法中一定要使用 async ，返回值前要加 await 。

在聊天頁(yè)面中我們可以看到頂部的搜索框，這個(gè)搜索框是跟列表一起滾動(dòng)的，所以比較好的實(shí)現(xiàn)方式就是把搜索框定義為一個(gè) cell 。其實(shí)這個(gè)搜索框只有點(diǎn)擊事件，點(diǎn)擊之后跳轉(zhuǎn)一個(gè)新的頁(yè)面，所以我們只需要使用小部件來(lái)實(shí)現(xiàn)搜索框的展示就好。搜索框由白色底視圖跟圖片和文本組成，所以這里我們通過(guò) Stack 部件來(lái)實(shí)現(xiàn)， children 的第一個(gè)元素為白色底視圖，圖片跟搜索文字用 Row 部件來(lái)實(shí)現(xiàn)，圖片跟文字布局左右排列。

Flutter倒計(jì)時(shí)定時(shí)器（一）

寫一個(gè)倒計(jì)時(shí)定時(shí)器聽(tīng)起來(lái)真的好簡(jiǎn)單，然而在Flutter里面寫這個(gè)東西還是挺坑的。

原本以為創(chuàng)建一個(gè)Timer就一切都搞定了，但并沒(méi)辦法實(shí)時(shí)獲取倒計(jì)時(shí)的進(jìn)度。

看了一下源碼，我們還可以創(chuàng)建一個(gè)周期性的Timer，從打印結(jié)果可以看到Timer的tick是從1開(kāi)始的。

我們修改一下做一個(gè)倒計(jì)時(shí)獲取重新獲取驗(yàn)證碼的功能。

Flutter ----- Timer(定時(shí)器)

Timer 官網(wǎng)

Timer 類存在于dart:async內(nèi)，所以我們需要先導(dǎo)入

回調(diào)只需要一次:

回調(diào)多次的定時(shí)器:

基本用法如上所述，至于倒計(jì)時(shí)，延遲執(zhí)行....... 自由發(fā)揮。