文章目錄

• 一、FutureBuilder 簡介
• 二、處理 Flutter 中的中文亂碼
• 三、完整代碼示例
• 四、相關資源

一、FutureBuilder 簡介

---

FutureBuilder 本質是組件 : FutureBuilder 構造好以后 , 會自動執行異步操作 , 并返回 Widget 組件 , 因此 FutureBuilder 也是一個組件 , 在不同的狀態下顯示不同樣式的組件 ;

FutureBuilder 泛型設置 : FutureBuilder 的泛型 , 表示異步調用得到的 Future 的泛型 , 也就是返回結果的格式 ; FutureBuilder<CommonModel> 表示異步調用 Future 的返回值是 Future<CommonModel> ;

Future<T> future 參數設置 : 這是設置的是異步操作方法 , 下面的 httpGet() 方法 , 是一個返回 Future<CommonModel> 類型的方法 , 可以直接設置給 FutureBuilder 構造函數作為參數 ;

/// 調用 Http Get 方法 , 獲取服務器的 json 數據Future<CommonModel> httpGet() async {//var url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');var url = Uri.parse('https://www.devio.org/io/flutter_app/json/test_common_model.json');// 異步請求 , 獲取遠程服務器信息final response = await http.get(url);/// 處理中文亂碼Utf8Decoder utf8decoder = Utf8Decoder();/// 將二進制 Byte 數據以 UTF-8 格式編碼 , 獲取編碼后的字符串String responseString = utf8decoder.convert(response.bodyBytes);// 將 json 字符串信息轉為 Map<String, dynamic> 類型的鍵值對信息Map<String, dynamic> jsonMap = json.decode(responseString);return CommonModel.fromJson(jsonMap);}

@required AsyncWidgetBuilder<T> builder 參數是必須設置的參數 , 該參數是 AsyncWidgetBuilder<T> 類型 的方法 :

typedef AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnapshot<T> snapshot);

傳入的參數如下 : 自己寫一個匿名函數 , 參數是 BuildContext context, AsyncSnapshot<T> snapshot , 返回值是 Widget ;

(BuildContext context, AsyncSnapshot<CommonModel> snapshot){return Text(""); }

在上述 匿名函數 中 , 開始根據 AsyncSnapshot<CommonModel> snapshot 參數進行各種操作 , BuildContext context 參數在本次沒有用到 ;

通過 snapshot.connectionState 可以獲取當前異步請求的狀態 , 可以在請求中顯示進度條 , 請求后判定是否請求成功 , 如果出錯 , 則顯示報錯信息 , 如果請求成功 , 則顯示請求成功的信息 ;

無論怎樣 , 最終要返回一個 Widget 組件 ;

FutureBuilder 構造函數完整代碼示例 :

@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text("HTTP Get 請求"),),// 線性布局 列body: FutureBuilder<CommonModel>(// 設置異步調用的方法future: httpGet(),/// 接收如下類型的對象/// typedef AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnapshot<T> snapshot);builder: (BuildContext context, AsyncSnapshot<CommonModel> snapshot){/// 判斷 AsyncSnapshot 的連接狀態switch(snapshot.connectionState){case ConnectionState.none:return Text("未連接");case ConnectionState.waiting:/// 返回一個進度條return Center(child: CircularProgressIndicator(),);case ConnectionState.active:/// 激活狀態 , 返回一個進度條return Text("");case ConnectionState.done:/// 請求結束 , 如果出現錯誤 , 則返回錯誤信息/// 如果請求成功 , 返回從網絡中請求的數據if(snapshot.hasError) {return Text("請求失敗 , 報錯信息 : ${snapshot.error}", style: TextStyle(color: Colors.red),);} else {return Text("請求成功 , 獲取信息 : ${snapshot.data?.url}", style: TextStyle(color: Colors.green),);}}},),),);}

二、處理 Flutter 中的中文亂碼

---

數據是以 UTF-8 格式進行編碼的 , 只能以 UTF-8 格式進行解碼 ;

創建 Utf8Decoder 解碼器 ,

/// 處理中文亂碼Utf8Decoder utf8decoder = Utf8Decoder();

調用解碼器的 convert 方法 , 傳入原始的二進制數據 , 注意是字節數組類型的數據 ;

/// 將二進制 Byte 數據以 UTF-8 格式編碼 , 獲取編碼后的字符串String responseString = utf8decoder.convert(response.bodyBytes);

得到的返回值就是編碼正確的字符串文本信息 ;

完整代碼示例 :

/// 調用 Http Get 方法 , 獲取服務器的 json 數據Future<CommonModel> httpGet() async {//var url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');var url = Uri.parse('https://www.devio.org/io/flutter_app/json/test_common_model.json');// 異步請求 , 獲取遠程服務器信息final response = await http.get(url);/// 處理中文亂碼Utf8Decoder utf8decoder = Utf8Decoder();/// 將二進制 Byte 數據以 UTF-8 格式編碼 , 獲取編碼后的字符串String responseString = utf8decoder.convert(response.bodyBytes);// 將 json 字符串信息轉為 Map<String, dynamic> 類型的鍵值對信息Map<String, dynamic> jsonMap = json.decode(responseString);return CommonModel.fromJson(jsonMap);}

三、完整代碼示例

---

import 'package:flutter/material.dart'; import 'package:http/http.dart' as http;/// json 序列化 , 反序列化 包 import 'dart:convert';void main() {runApp(MyApp()); }class MyApp extends StatefulWidget {const MyApp({Key? key}) : super(key: key);@override_MyAppState createState() => _MyAppState(); }class _MyAppState extends State<MyApp> {/// HTTP GET 返回值String httpGetResult = "";/// 調用 Http Get 方法 , 獲取服務器的 json 數據Future<CommonModel> httpGet() async {//var url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');var url = Uri.parse('https://www.devio.org/io/flutter_app/json/test_common_model.json');// 異步請求 , 獲取遠程服務器信息final response = await http.get(url);/// 處理中文亂碼Utf8Decoder utf8decoder = Utf8Decoder();/// 將二進制 Byte 數據以 UTF-8 格式編碼 , 獲取編碼后的字符串String responseString = utf8decoder.convert(response.bodyBytes);// 將 json 字符串信息轉為 Map<String, dynamic> 類型的鍵值對信息Map<String, dynamic> jsonMap = json.decode(responseString);return CommonModel.fromJson(jsonMap);}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text("HTTP Get 請求"),),// 線性布局 列body: FutureBuilder<CommonModel>(// 設置異步調用的方法future: httpGet(),/// 接收如下類型的對象/// typedef AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnapshot<T> snapshot);builder: (BuildContext context, AsyncSnapshot<CommonModel> snapshot){/// 判斷 AsyncSnapshot 的連接狀態switch(snapshot.connectionState){case ConnectionState.none:return Text("未連接");case ConnectionState.waiting:/// 返回一個進度條return Center(child: CircularProgressIndicator(),);case ConnectionState.active:/// 激活狀態 , 返回一個進度條return Text("");case ConnectionState.done:/// 請求結束 , 如果出現錯誤 , 則返回錯誤信息/// 如果請求成功 , 返回從網絡中請求的數據if(snapshot.hasError) {return Text("請求失敗 , 報錯信息 : ${snapshot.error}", style: TextStyle(color: Colors.red),);} else {return Text("請求成功 , 獲取信息 : ${snapshot.data?.url}", style: TextStyle(color: Colors.green),);}}},),),);} }class CommonModel {final String? icon;final String? title;final String? url;final String? statusBarColor;final bool? hideAppBar;CommonModel({this.icon, this.title, this.url, this.statusBarColor, this.hideAppBar});factory CommonModel.fromJson(Map<String, dynamic> json) {return CommonModel(icon: json['icon'],title: json['title'],url: json['url'],statusBarColor: json['statusBarColor'],hideAppBar: json['hideAppBar'],);} }

執行結果 :

四、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實戰電子書 : https://book.flutterchina.club/chapter1/
• Dart 語言練習網站 : https://dartpad.dartlang.org/

重要的專題 :

• Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_http( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/21528472 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的【Flutter】Future 与 FutureBuilder 异步编程代码示例 ( FutureBuilder 构造函数设置 | 处理 Flutter 中文乱码 | 完整代码示例 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。