文章目錄

• 一、FutureBuilder 簡介
• 二、FutureBuilder 構造方法
• 三、AsyncSnapshot 異步計算
• 四、相關資源

一、FutureBuilder 簡介

---

FutureBuilder 將 異步操作 與 異步 UI 更新 結合在一起 ; 它可以將 異步操作 的結果 , 異步的 更新到 UI 界面中 ;

異步操作結果 : 網絡請求 , 數據庫讀取 , 等耗時操作 得到的結果 ;

二、FutureBuilder 構造方法

---

FutureBuilder 構造方法如下 :

/// Creates a widget that builds itself based on the latest snapshot of /// interaction with a [Future]. /// /// The [builder] must not be null. const FutureBuilder({Key? key,this.future,this.initialData,required this.builder, }) : assert(builder != null),super(key: key);FutureBuilder({Key key, Future<T> future, T initialData, @required AsyncWidgetBuilder<T> builder })

FutureBuilder 構造方法參數解析 :

• Future<T> future : 與異步操作相關的異步計算 ;

/// The asynchronous computation to which this builder is currently connected,/// possibly null.////// If no future has yet completed, including in the case where [future] is/// null, the data provided to the [builder] will be set to [initialData].final Future<T>? future;

• T initialData : 異步計算完成前的初始化數據 ;

/// The data that will be used to create the snapshots provided until a/// non-null [future] has completed.////// If the future completes with an error, the data in the [AsyncSnapshot]/// provided to the [builder] will become null, regardless of [initialData]./// (The error itself will be available in [AsyncSnapshot.error], and/// [AsyncSnapshot.hasError] will be true.)final T? initialData;

• @required AsyncWidgetBuilder<T> builder : AsyncWidgetBuilder 類型的回調函數 , 這是基于異步交互構建 Widget 的函數 ;

/// Signature for strategies that build widgets based on asynchronous /// interaction. /// /// See also: /// /// * [StreamBuilder], which delegates to an [AsyncWidgetBuilder] to build /// itself based on a snapshot from interacting with a [Stream]. /// * [FutureBuilder], which delegates to an [AsyncWidgetBuilder] to build /// itself based on a snapshot from interacting with a [Future]. typedef AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnapshot<T> snapshot);

三、AsyncSnapshot 異步計算

---

AsyncWidgetBuilder<T> 回調函數的實際類型是 Widget Function(BuildContext context, AsyncSnapshot<T> snapshot) , 接收兩個參數 BuildContext context 和 AsyncSnapshot<T> snapshot , 返回值是 Widget 組件 ;

AsyncSnapshot<T> snapshot 參數中包含有異步計算的信息 ;

class AsyncSnapshot<T> {/// Creates an [AsyncSnapshot] with the specified [connectionState],/// and optionally either [data] or [error] with an optional [stackTrace]/// (but not both data and error).const AsyncSnapshot._(this.connectionState, this.data, this.error, this.stackTrace): assert(connectionState != null),assert(!(data != null && error != null)),assert(stackTrace == null || error != null);/// Current state of connection to the asynchronous computation.final ConnectionState connectionState;/// The latest data received by the asynchronous computation.////// If this is non-null, [hasData] will be true.////// If [error] is not null, this will be null. See [hasError].////// If the asynchronous computation has never returned a value, this may be/// set to an initial data value specified by the relevant widget. See/// [FutureBuilder.initialData] and [StreamBuilder.initialData].final T? data;/// The latest error object received by the asynchronous computation.////// If this is non-null, [hasError] will be true.////// If [data] is not null, this will be null.final Object? error;/// Returns whether this snapshot contains a non-null [data] value.////// This can be false even when the asynchronous computation has completed/// successfully, if the computation did not return a non-null value. For/// example, a [Future<void>] will complete with the null value even if it/// completes successfully.bool get hasData => data != null;/// Returns whether this snapshot contains a non-null [error] value.////// This is always true if the asynchronous computation's last result was/// failure.bool get hasError => error != null; }

AsyncSnapshot<T> snapshot 中的 ConnectionState connectionState 是連接狀態 , 是個枚舉值 , 有四種取值 :

• none
• waiting
• active
• done

/// The state of connection to an asynchronous computation. /// /// The usual flow of state is as follows: /// /// 1. [none], maybe with some initial data. /// 2. [waiting], indicating that the asynchronous operation has begun, /// typically with the data being null. /// 3. [active], with data being non-null, and possible changing over time. /// 4. [done], with data being non-null. /// /// See also: /// /// * [AsyncSnapshot], which augments a connection state with information /// received from the asynchronous computation. enum ConnectionState {/// Not currently connected to any asynchronous computation.////// For example, a [FutureBuilder] whose [FutureBuilder.future] is null.none,/// Connected to an asynchronous computation and awaiting interaction.waiting,/// Connected to an active asynchronous computation.////// For example, a [Stream] that has returned at least one value, but is not/// yet done.active,/// Connected to a terminated asynchronous computation.done, }

final T? data 是異步計算接收的最新數據 ;

Object? error 是異步計算接收的錯誤對象 ;

AsyncSnapshot<T> snapshot 中還有 hasData 和 hasError 兩個屬性 , hasData 用于檢查該對象是否包含非空數據值 , hasError 用于檢查是否包含錯誤值 ;

/// Returns whether this snapshot contains a non-null [data] value.////// This can be false even when the asynchronous computation has completed/// successfully, if the computation did not return a non-null value. For/// example, a [Future<void>] will complete with the null value even if it/// completes successfully.bool get hasData => data != null;/// Returns whether this snapshot contains a non-null [error] value.////// This is always true if the asynchronous computation's last result was/// failure.bool get hasError => error != null;

四、相關資源

---

參考資料 :

• 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】FutureBuilder 异步编程 ( FutureBuilder 构造方法 | AsyncSnapshot 异步计算 )的全部內容，希望文章能夠幫你解決所遇到的問題。

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