FutureBuilder在Dart中的封装实践

2024-01-04 02:59:30

封装通用的 FutureBuilder：管理异步操作的 UI 界面

前言

在 Dart 应用程序开发中，异步处理是不可避免的。FutureBuilder 是一种强大的工具，可以帮助我们轻松管理异步操作的 UI 界面。本文将深入探讨如何封装一个通用的 FutureBuilder 小组件，以便在各种情况下轻松重复使用。

理解 FutureBuilder

FutureBuilder 是 Dart 中的一个内置小组件，它可以监听 Future 对象的状态。根据 Future 的状态，FutureBuilder 可以显示不同的 UI 元素，例如加载指示器、错误消息或实际数据。

封装通用 FutureBuilder

要封装一个通用的 FutureBuilder，我们需要定义以下内容：

数据构建器： 此构建器将根据 Future 返回的数据构建 UI 元素。
加载构建器： 当 Future 正在等待时，此构建器将构建 UI 元素。
错误构建器： 如果 Future 抛出错误，此构建器将构建 UI 元素。
连接构建器： 此构建器在 FutureBuilder 连接到 Future 时构建 UI 元素。

实现通用 FutureBuilder

以下是通用 FutureBuilder 的示例实现：

class GenericFutureBuilder<T> extends StatelessWidget {
  final Future<T> future;
  final Widget Function(BuildContext, T) dataBuilder;
  final Widget Function(BuildContext) loadingBuilder;
  final Widget Function(BuildContext, Object) errorBuilder;
  final Widget Function(BuildContext) connectionBuilder;

  const GenericFutureBuilder({
    required this.future,
    required this.dataBuilder,
    required this.loadingBuilder,
    required this.errorBuilder,
    required this.connectionBuilder,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<T>(
      future: future,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return connectionBuilder(context);
        } else if (snapshot.hasError) {
          return errorBuilder(context, snapshot.error);
        } else if (snapshot.hasData) {
          return dataBuilder(context, snapshot.data);
        } else {
          return loadingBuilder(context);
        }
      },
    );
  }
}

用法

要使用通用 FutureBuilder，只需指定所需的构建器并提供 Future 对象：

// 使用示例
GenericFutureBuilder<String>(
  future: fetchUserData(),
  dataBuilder: (context, data) => Text(data),
  loadingBuilder: (context) => CircularProgressIndicator(),
  errorBuilder: (context, error) => Text(error.toString()),
  connectionBuilder: (context) => Text('Loading...'),
);