【Flutter】FutureBuilder 异步编程 ( FutureBuilder 构造方法 | AsyncSnapshot 异步计算 )

文章目录

  • 一、FutureBuilder 简介
  • 二、FutureBuilder 构造方法
  • 三、AsyncSnapshot 异步计算
  • 四、相关资源

一、FutureBuilder 简介


FutureBuilder 将 异步操作 与 异步 UI 更新 结合在一起 ; 它可以将 异步操作 的结果 , 异步的 更新到 UI 界面中 ;

异步操作结果 : 网络请求 , 数据库读取 , 等耗时操作 得到的结果 ;

二、FutureBuilder 构造方法


FutureBuilder 构造方法如下 :

代码语言:javascript
复制
/// 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 : 与异步操作相关的异步计算 ;
代码语言:javascript
复制
  /// 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 : 异步计算完成前的初始化数据 ;
代码语言:javascript
复制
  /// 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 的函数 ;
代码语言:javascript
复制
/// 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 参数中包含有异步计算的信息 ;

代码语言:javascript
复制
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
代码语言:javascript
复制
/// 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 用于检查是否包含错误值 ;

代码语言:javascript
复制
  /// 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;

四、相关资源


参考资料 :

重要的专题 :

博客源码下载 :

  • GitHub 地址 : https://github.com/han1202012/flutter_http( 随博客进度一直更新 , 有可能没有本博客的源码 )

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