上一篇中我記錄了基於Flutter的開源中國客戶端各個靜態頁面的實現，主要是UI的實現，沒有涉及到任何網路請求，資料載入、儲存等方面。本篇記錄的是該專案中的網路請求和資料儲存、載入的方式，希望自己在溫故知新的同時能給Flutter初學者帶來幫助。
Flutter中的網路請求
Flutter中已內建了網路請求庫，可直接匯入使用：
import 'package:http/http.dart' as http;
複製程式碼一個最簡單的get請求程式碼如下：
import 'package:http/http.dart' as http;
main() async {
http.Response res = await http.get("https://cn.bing.com");
print(res.body); // 列印出get請求返回的字串資料
}
複製程式碼控制檯中會列印出請求返回的字串資料。
另外也有一些開源的網路請求庫，由於筆者暫時沒有用過，所以在本篇中不詳細說了。
在基於Flutter的開源中國客戶端中，使用的也是Flutter內建的網路請求庫，但是做了一些簡單的封裝，主要程式碼在lib/util/NetUtils.dart檔案中，程式碼如下：
import 'dart:async';
import 'package:http/http.dart' as http;
class NetUtils {
// get請求的封裝，傳入的兩個引數分別是請求URL和請求引數，請求引數以map的形式傳入，會在方法體中自動拼接到URL後面
static Future<String> get(String url, {Map<String, String> params}) async {
if (params != null && params.isNotEmpty) {
// 如果引數不為空，則將引數拼接到URL後面
StringBuffer sb = new StringBuffer("?");
params.forEach((key, value) {
sb.write("$key" + "=" + "$value" + "&");
});
String paramStr = sb.toString();
paramStr = paramStr.substring(0, paramStr.length - 1);
url += paramStr;
}
http.Response res = await http.get(url);
return res.body;
}
// post請求
static Future<String> post(String url, {Map<String, String> params}) async {
http.Response res = await http.post(url, body: params);
return res.body;
}
}
複製程式碼使用該工具類的方法也很簡單，如下程式碼所示：
import 'util/NetUtils.dart';
main() {
Map<String, String> map = new Map();
map['name'] = 'zhangsan';
map['age'] = '20';
NetUtils.get("http://www.baidu.com", params: map).then((res) {
print(res);
});
}
複製程式碼Flutter中的資料儲存
一般移動應用開發中的資料儲存基本上都是檔案、資料庫等方式。Flutter沒有提供直接運算元據庫的API，但是有第三方的外掛可以用，比如sqflite，關於這個外掛的使用方法，可以檢視這裡，由於在基於Flutter的開源中國客戶端專案中沒有用到資料庫，所以這幾也不做詳細說明了。
本專案中針對token，使用者資訊的儲存，使用的是Flutter提供的類似於Android的SharedPreferences，這個庫是以外掛的形式提供的，並沒有內建到Flutter中，所以我們需要為專案配置外掛，在pubspec.yaml檔案中，加入如下配置：
dependencies:
flutter:
sdk: flutter
shared_preferences: "^0.4.1"
複製程式碼然後執行flutter packages get命令即可自動安裝外掛，如果你使用AndroidStudio作為開發工具，當pubspec.yaml檔案做了修改後，頁面上方會自動出現提示，點選Packages get即可。
外掛安裝成功後，使用起來很容易，如下程式碼所示：
import 'package:shared_preferences/shared_preferences.dart';
main() async {
SharedPreferences sp = await SharedPreferences.getInstance();
sp.setString("name", "zhangsan");
sp.setInt("age", 20);
sp.setBool("isLogin", false);
sp.setDouble("price", 100.5);
}
複製程式碼要獲取儲存的某個資料，只需要使用sp.get(key)即可。shared_preferences外掛的主頁在這裡。
關於外掛的使用方法，這裡說明一下：pub.flutter-io.cn/是Flutter提供的一個外掛倉庫，可以釋出有關dart或flutter的外掛。如果我們需要實現某個功能，而flutter又沒有提供類似的功能時，可以上這個網站上搜尋相關關鍵字，也許就有人已經發布了他寫的庫，正好可以實現我們需要的功能。
上面簡要說明了Flutter中的網路請求和資料儲存，下面結合專案來說明如何載入網路資料，如何儲存使用者資訊等資料。
從網路載入資訊列表並顯示
上一篇中我記錄瞭如何顯示資訊列表，但是完全是一個靜態的資訊列表，裡面的資料都是測試的假資料，這一篇就記錄下如何從介面獲取真實的資訊資料並顯示出來。
在基於Flutter的開源中國客戶端專案中，由於開源中國官方的openapi提供的資料比較少，故資訊列表沒有使用開源中國官方提供的介面，是筆者用python抓的網站資料，介面部署在香港的雲伺服器上，若有訪問較慢的情況，請諒解。另外，介面沒有做任何認證，請不要頻繁請求介面。
顯示載入中的Loading
既然是從網路上載入資料，那必然會有一個耗時的等待期，需要給載入過程展示一個Loading，這裡我們為NewsListPage新增一個listData變數，如果該變數為null，則顯示Loading，否則就顯示列表資料，顯示Loading的同時從網路上請求資料，一旦有資料後，就通過setState更新listData，主要程式碼如下(NewsListPage.dart檔案)：
@override
Widget build(BuildContext context) {
// 無資料時，顯示Loading
if (listData == null) {
return new Center(
// CircularProgressIndicator是一個圓形的Loading進度條
child: new CircularProgressIndicator(),
);
} else {
// 有資料，顯示ListView
Widget listView = new ListView.builder(
itemCount: listData.length * 2,
itemBuilder: (context, i) => renderRow(i),
controller: _controller,
);
// RefreshIndicator為ListView增加了下拉重新整理能力，onRefresh引數傳入一個方法，在下拉重新整理時呼叫
return new RefreshIndicator(child: listView, onRefresh: _pullToRefresh);
}
}
@override
void initState() {
super.initState();
getNewsList(false);
}
// 從網路獲取資料，isLoadMore表示是否是載入更多資料
getNewsList(bool isLoadMore) {
String url = Api.NEWS_LIST;
// curPage是定義在NewsListPageState中的成員變數，表示當前載入的頁面索引
url += "?pageIndex=$curPage&pageSize=10";
NetUtils.get(url).then((data) {
if (data != null) {
// 將介面返回的json字串解析為map型別，需要匯入包：import 'dart:convert';
Map<String, dynamic> map = json.decode(data);
if (map['code'] == 0) {
// code=0表示請求成功
var msg = map['msg'];
// total表示資訊總條數
listTotalSize = msg['news']['total'];
// data為資料內容，其中包含slide和news兩部分，分別表示頭部輪播圖資料，和下面的列表資料
var _listData = msg['news']['data'];
var _slideData = msg['slide'];
setState(() {
if (!isLoadMore) {
// 不是載入更多，則直接為變數賦值
listData = _listData;
slideData = _slideData;
} else {
// 是載入更多，則需要將取到的news資料追加到原來的資料後面
List list1 = new List();
// 新增原來的資料
list1.addAll(listData);
// 新增新取到的資料
list1.addAll(_listData);
// 判斷是否獲取了所有的資料，如果是，則需要顯示底部的"我也是有底線的"佈局
if (list1.length >= listTotalSize) {
list1.add(Constants.END_LINE_TAG);
}
// 給列表資料賦值
listData = list1;
// 輪播圖資料
slideData = _slideData;
}
});
}
}
});
}
複製程式碼上面的程式碼中是處理顯示Loading和顯示資料列表的不同邏輯，然後還有載入更多的邏輯處理，但是什麼時候去載入更多資料呢？很顯然，應該監聽列表的滾動，當列表滾動到底時，主動去載入下一頁資料。
載入下一頁資料
在上面的程式碼中，我們在建立ListView時，傳入了一個controller引數，這個controller就是為了監聽列表滾動事件而傳入的，它是一個ScrollController物件，我們在NewsListPageState類中定義這個變數並初始化：
ScrollController _controller = new ScrollController();
複製程式碼要監聽列表是否滾動到底的事件，還需要給這個controller新增Listener，在NewsListPageState類的構造方法中新增如下程式碼：
NewsListPageState() {
_controller.addListener(() {
// 表示列表的最大滾動距離
var maxScroll = _controller.position.maxScrollExtent;
// 表示當前列表已向下滾動的距離
var pixels = _controller.position.pixels;
// 如果兩個值相等，表示滾動到底，並且如果列表沒有載入完所有資料
if (maxScroll == pixels && listData.length < listTotalSize) {
// scroll to bottom, get next page data
curPage++; // 當前頁索引加1
getNewsList(true); // 獲取下一頁資料
}
});
}
複製程式碼給ListView加入下拉重新整理能力
其實在上面的程式碼中已經為ListView新增了下拉重新整理的能力，就是build方法返回時，為ListView包裹了一層RefreshIndicator：
return new RefreshIndicator(child: listView, onRefresh: _pullToRefresh);
複製程式碼_pullToRefresh方法會在下拉重新整理的時候呼叫，因為是下拉重新整理，所以取的是第一頁資料，並且不是載入更多，所以方法體如下：
Future<Null> _pullToRefresh() async {
curPage = 1;
getNewsList(false);
return null;
}
複製程式碼需要注意的是，onRefresh引數需要一個Future<Null>型別的資料，所以上面的_pullToRefresh才會返回Future<Null>。
改造過後的資訊列表如下gif圖所示（圖比較大，載入會有點慢）：
儲存登入後的使用者資料
由於獲取動彈資訊，評論動彈等，都需要呼叫開源中國的openapi，而這些介面都是需要AccessToken和使用者id的，所以我們必須把使用者登入後的資料儲存下來，以便在需要用到這些資料時能獲取到。具體的如何實現登入將會放在下一篇——Flutter外掛的使用中說明。本篇暫時忽略登入的過程，只說明登入後如何儲存使用者資訊。
為了統一管理SharedPreferences，這裡我們新建一個工具類DataUtils，檔案目錄在lib/util/DataUtils.dart。開源中國openapi呼叫介面成功登入後，會返回以下資訊：
| 欄位名 | 欄位型別 | 說明 |
|---|---|---|
| access_token | String | access_token值 |
| refresh_token | String | refresh_token值 |
| uid | int | 授權使用者的uid |
| tokenType | String | access_token型別 |
| expires_in | int | 超時時間(單位秒) |
為了在SharedPreferences中儲存以上資訊，先在DataUtils中宣告每個欄位對應的key，程式碼如下：
static final String SP_AC_TOKEN = "accessToken";
static final String SP_RE_TOKEN = "refreshToken";
static final String SP_UID = "uid";
static final String SP_IS_LOGIN = "isLogin"; // SP_IS_LOGIN標記是否登入
static final String SP_EXPIRES_IN = "expiresIn";
static final String SP_TOKEN_TYPE = "tokenType";
複製程式碼然後提供一個靜態方法用於一次性儲存這些資訊：
// 儲存使用者登入資訊，data中包含了token等資訊
static saveLoginInfo(Map data) async {
if (data != null) {
SharedPreferences sp = await SharedPreferences.getInstance();
String accessToken = data['access_token'];
await sp.setString(SP_AC_TOKEN, accessToken);
String refreshToken = data['refresh_token'];
await sp.setString(SP_RE_TOKEN, refreshToken);
num uid = data['uid'];
await sp.setInt(SP_UID, uid);
String tokenType = data['tokenType'];
await sp.setString(SP_TOKEN_TYPE, tokenType);
num expiresIn = data['expires_in'];
await sp.setInt(SP_EXPIRES_IN, expiresIn);
await sp.setBool(SP_IS_LOGIN, true); // SP_IS_LOGIN標記是否登入
}
}
複製程式碼登入成功後就可以呼叫開源中國的openapi獲取使用者資訊了，跟上面類似，先定義使用者資訊每個欄位對應的key：
static final String SP_USER_NAME = "name";
static final String SP_USER_ID = "id";
static final String SP_USER_LOC = "location";
static final String SP_USER_GENDER = "gender";
static final String SP_USER_AVATAR = "avatar";
static final String SP_USER_EMAIL = "email";
static final String SP_USER_URL = "url";
複製程式碼根據命名就知道每個欄位代表的什麼含義，這裡就不細說了，然後還是提供一個靜態方法，用於一次性儲存使用者資訊：
// 儲存使用者個人資訊
static Future<UserInfo> saveUserInfo(Map data) async {
if (data != null) {
SharedPreferences sp = await SharedPreferences.getInstance();
String name = data['name'];
num id = data['id'];
String gender = data['gender'];
String location = data['location'];
String avatar = data['avatar'];
String email = data['email'];
String url = data['url'];
await sp.setString(SP_USER_NAME, name);
await sp.setInt(SP_USER_ID, id);
await sp.setString(SP_USER_GENDER, gender);
await sp.setString(SP_USER_AVATAR, avatar);
await sp.setString(SP_USER_LOC, location);
await sp.setString(SP_USER_EMAIL, email);
await sp.setString(SP_USER_URL, url);
UserInfo userInfo = new UserInfo(
id: id,
name: name,
gender: gender,
avatar: avatar,
email: email,
location: location,
url: url
);
return userInfo;
}
return null;
}
複製程式碼儲存使用者資訊是一個非同步的過程，其中UserInfo是定義在lib/model/下的一個實體類，程式碼如下：
// 使用者資訊
class UserInfo {
String gender;
String name;
String location;
num id;
String avatar;
String email;
String url;
UserInfo({this.id, this.name, this.gender, this.avatar, this.email, this.location, this.url});
}
複製程式碼為了方便的拿到儲存的使用者資訊和AccessToken資料，以及判斷當前是否登入，為DataUtils提供三個靜態方法：
// 獲取使用者資訊
static Future<UserInfo> getUserInfo() async {
SharedPreferences sp = await SharedPreferences.getInstance();
bool isLogin = sp.getBool(SP_IS_LOGIN);
if (isLogin == null || !isLogin) {
return null;
}
UserInfo userInfo = new UserInfo();
userInfo.id = sp.getInt(SP_USER_ID);
userInfo.name = sp.getString(SP_USER_NAME);
userInfo.avatar = sp.getString(SP_USER_AVATAR);
userInfo.email = sp.getString(SP_USER_EMAIL);
userInfo.location = sp.getString(SP_USER_LOC);
userInfo.gender = sp.getString(SP_USER_GENDER);
userInfo.url = sp.getString(SP_USER_URL);
return userInfo;
}
// 是否登入
static Future<bool> isLogin() async {
SharedPreferences sp = await SharedPreferences.getInstance();
bool b = sp.getBool(SP_IS_LOGIN);
return b != null && b;
}
// 獲取accesstoken
static Future<String> getAccessToken() async {
SharedPreferences sp = await SharedPreferences.getInstance();
return sp.getString(SP_AC_TOKEN);
}
複製程式碼如果使用者登出登入，需要清除已儲存的使用者資訊：
// 清除登入資訊
static clearLoginInfo() async {
SharedPreferences sp = await SharedPreferences.getInstance();
await sp.setString(SP_AC_TOKEN, "");
await sp.setString(SP_RE_TOKEN, "");
await sp.setInt(SP_UID, -1);
await sp.setString(SP_TOKEN_TYPE, "");
await sp.setInt(SP_EXPIRES_IN, -1);
await sp.setBool(SP_IS_LOGIN, false);
}
複製程式碼原始碼
本篇相關的所有原始碼都在GitHub上demo-flutter-osc專案的v0.3分支。
後記
本篇主要記錄的是基於Flutter的開源中國客戶端app中的網路請求和資料儲存方式，寫得不清楚的地方請多包涵，有問題可以留言告訴筆者。下一篇將記錄Flutter中的外掛使用。
我的開源專案
- 基於Google Flutter的開源中國客戶端，希望大家給個Star支援一下，原始碼：
- 基於Flutter的俄羅斯方塊小遊戲，希望大家給個Star支援一下，原始碼：
| 上一篇 | 下一篇 |
|---|---|
| 從0開始寫一個基於Flutter的開源中國客戶端（6） ——各個靜態頁面的實現 |
從0開始寫一個基於Flutter的開源中國客戶端（8） ——外掛的使用 |