不知到大家在軟件開發(fā)過程中序厉,一般首頁布局頂部都會有1個輪播圖滾動來宣傳自己的產(chǎn)品锐膜,一般輪播圖點擊跳轉(zhuǎn)H5的詳情頁。
當然一個頁面的開發(fā)要有客戶端開發(fā)和服務(wù)端開發(fā)弛房,往往開發(fā)的時候2端都是并行開發(fā)的道盏,有的時候客戶端開發(fā)UI完成后,服務(wù)端的數(shù)據(jù)接口開發(fā)完成后文捶,所以需要自己替換本地數(shù)據(jù)為發(fā)起請求網(wǎng)絡(luò)數(shù)據(jù)來交付UI展示的效果荷逞!
那么話不多說,我們開始來詳細描述網(wǎng)絡(luò)數(shù)據(jù)和輪播圖組件綁定實現(xiàn)過程:
一般這個情況服務(wù)端數(shù)據(jù)接口寫完后粹排,會給我們1個接口文檔种远,里面涉及基礎(chǔ)url和參數(shù)配置,以及返回的數(shù)據(jù)格式
1 獲取猜你喜歡數(shù)據(jù)的url
https://www.itying.com/api/focus
2 打開jsonToDart的網(wǎng)頁顽耳,把json拷貝到里面點擊Gennerate Dart自動生成數(shù)據(jù)模型
生成json網(wǎng)站鏈接:https://javiercbk.github.io/json_to_dart/
3 修改自動生成數(shù)據(jù)模型修改為業(yè)務(wù)輪播圖的名字FocusModel
4 在pubspec.yaml引入第dio網(wǎng)絡(luò)庫
5 封裝getFocusData方法調(diào)用dio獲取輪播圖的網(wǎng)絡(luò)數(shù)據(jù)
6 回到輪播圖組件UI函數(shù)坠敷,將輪播圖數(shù)組和UI進行數(shù)據(jù)綁定
7 執(zhí)行flutter run命令 測試UI看效果