Flutter中通過https post Json接收Json


Flutter 已然成為炙手可熱前端框架。若問跨平台到底有多香,自然是要多香有多香。今天我就分享這些天研究Flutter http連接和json格式轉換的內容,小弟對Flutter也是小白一名,如有錯誤請多加指正。

源碼下載地址

先來看看要完成的任務:調用https://test.apigj.com/apgetuserinfo 獲取用戶信息

{
  "userid": 7933833267642368
}
 
{
  "msg": "success",
  "code": 0,
  "userinfo": {
    "username": "Batman",
    "gender": 0,
    "birthday": 5025914914078720
  }
}

 

1. 處理Json和Object互轉

Flutter 官方給出兩種建議:手動序列化和自動生成代碼的方式

手動序列化適合較小的項目,具有簡單靈活的優勢,但也容易出現因輸入錯誤造成無法解析的小問題,我這里就不展開了

自動生成代碼適合相對較大的項目,同時要求寫class定義數據結構:

首先,修改pubspec.yaml文件


pubspec.yaml
 

添加json_annotation, build_runner和json_serializable包到指定位置

然后,完成class定義數據結構:


1個請求和2個返回

 


req_base.dart
 

res_common.dart 為了方便擴展所有的返回class都會繼承這個基本的返回class
 

res_ap_get_user_info.dart 這個文件里同時包含了user_info的定義

class定義好后,這里還有些錯誤,原因是還有些代碼是需要Flutter自動生成的


在命令行中輸入flutter pub run build_runner build

成功以后會生成幾下.g.dart文件角,錯誤也就消失了


3個.g.dart文件

這些文件里是對應class的解析和編碼的方法


res_ap_get_user_info.g.dart里面包含ResApGetUserInfo和UserInfo的解析和編碼方法

這樣Json處理內容就這些,已經可以非常方便的在對象和json之間互轉了

2. Https請求和返回

Http請求為了防止線程阻塞,多數情況下要使用多線程實現,Flutter的HttpClient已經在底層做了線程處理,所以要使用async, await或者Future進行同步線程,這里是我Http請求的靜態方法


沒有找到辦法傳遞類型並生成對象,所以最后僅轉成Map輸出

還有就是在Flutter Widget中調用請求的方法


請求並顯示數據

 

最終的效果
最終的效果

總體來說Flutter還是比較容易上手的,但要深入的話也可以實現多平台的Flutter庫,基本上可以使用Flutter實現一套代碼跨平台,還不開始研究么?

本示例實體class結構定義通過Api管家自動生成


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM