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

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

成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè),成都做網(wǎng)站公司-創(chuàng)新互聯(lián)建站已向上1000+企業(yè)提供了,網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷等服務(wù)!設(shè)計(jì)與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗(yàn),合理的價(jià)格為您打造企業(yè)品質(zhì)網(wǎng)站。

開始的時(shí)候我們是在頁面中直接使用三方框架 http 進(jìn)行網(wǎng)絡(luò)的請(qǐng)求，這里不好的一點(diǎn)就是如果將來我們更換了網(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)求方法，即使將來更換三方框架的話，我們只需要在我們自己網(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 ，通過單例方法 _getDioInstance 來獲取單例對(duì)象。我們定義了 post 跟 get 兩個(gè)靜態(tài)方法，在這兩個(gè)方法中我們都調(diào)用了私有方法 _sendRequest ， _sendRequest 方法中通過該傳入的枚舉參數(shù) HttpMethod 來區(qū)分 Dio 單例對(duì)象是調(diào)用 get 還是 post 請(qǐng)求。這里需要注意的是方法中一定要使用 async ，返回值前要加 await 。

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

flutter 網(wǎng)絡(luò)請(qǐng)求dio的簡(jiǎn)單使用以及請(qǐng)求頭參數(shù)的自定義

dio的使用方式有很多，我就只選出我認(rèn)為最好用的api方式做下記錄,把get成post就是post請(qǐng)求了,網(wǎng)絡(luò)請(qǐng)求都用的百度的api，實(shí)際上的response沒有任何意義，所以只要打印出response有值即可。

1.最簡(jiǎn)單的請(qǐng)求例子,網(wǎng)絡(luò)請(qǐng)求是異步的所以用async await

2.帶有參數(shù)的get請(qǐng)求

3.自定義請(qǐng)求頭,可定義的請(qǐng)求頭dart已經(jīng)為我們提供了專門的類存了對(duì)應(yīng)的字符,引入以下庫，就能使用 HttpHeaders

一般我們請(qǐng)求接收到的數(shù)據(jù)是json格式，如'accept: application/json',我們就可以這樣自定義請(qǐng)求頭

4.使用Baseoptions

其他詳細(xì)參數(shù)設(shè)置參考如下:

flutter 同時(shí)執(zhí)行多個(gè)異步請(qǐng)求回調(diào)

flutter中提供了Future.wait()函數(shù)，可以在執(zhí)行多個(gè)異步請(qǐng)求之后有一個(gè)統(tǒng)一的回調(diào)結(jié)果，但是劣勢(shì)在于，每一個(gè)異步函數(shù)的函數(shù)體中都需要執(zhí)行return去返回結(jié)果，如果在異步請(qǐng)求中，有多層success或者fail這種函數(shù)的嵌套，那么可能會(huì)在某個(gè)地方忽略掉retrun，導(dǎo)致沒有辦法拿到正確的結(jié)果。所以這里封裝了一個(gè)類似于js中Promise中的類去執(zhí)行多個(gè)異步請(qǐng)求。

調(diào)用方式如下：

Flutter 網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò) Failed host lookup:

Flutter 網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò) Failed host lookup:

一、如果是iOS真機(jī)調(diào)試報(bào)錯(cuò)

1.檢查iOS是否開啟網(wǎng)絡(luò)權(quán)限(在設(shè)置中檢查一下),(如果HTTP,在info中 添加 ATS)

二、如果是Android模擬器或真機(jī)調(diào)試報(bào)錯(cuò)

在debug和release目錄中的AndroidManifest.xml中加上

uses-permission android:name="android.permission.INTERNET"/

uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/

如果還是不行，執(zhí)行

flutter clean

Flutter中的網(wǎng)絡(luò)請(qǐng)求庫Dio簡(jiǎn)單使用

pubspec.yaml配置dio: ^版本號(hào)

執(zhí)行Pub get

導(dǎo)入頭文件

get請(qǐng)求與post請(qǐng)求

簡(jiǎn)單封裝

封裝請(qǐng)求類：

封裝配置信息類：

調(diào)用：