flutter 封装 FutureBuilder 并且展示详细的使用方法

Flutter中的FutureBuilder是一种异步UI构建模式，它可以帮助我们在等待异步操作完成时展示一些占位符UI，等异步操作完成后再用数据替换掉占位符UI。在封装FutureBuilder时，我们可以创建一个可重用的Widget，使得我们在多个页面或多个地方都可以调用这个Widget来展示异步数据。

下面是一个简单的FutureBuilder封装Widget的例子：

import 'package:flutter/material.dart';

class FutureBuilderWidget<T> extends StatelessWidget {
  final Future<T> future;
  final Widget Function(BuildContext, T) builder;
  final Widget Function(BuildContext, dynamic) errorBuilder;
  final Widget waitingWidget;

  const FutureBuilderWidget({
    Key key,
    this.future,
    this.builder,
    this.errorBuilder,
    this.waitingWidget,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<T>(
      future: future,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return waitingWidget ?? Center(child: CircularProgressIndicator());
        } else if (snapshot.hasData) {
          return builder(context, snapshot.data);
        } else {
          return errorBuilder != null
              ? errorBuilder(context, snapshot.error)
              : Center(child: Text('Error: ${snapshot.error}'));
        }
      },
    );
  }
}

在这个封装Widget中，我们传入了一个future和一个builder函数，当future完成后，会把得到的数据传入builder函数中进行处理。同时，我们还可以传入一个errorBuilder和一个waitingWidget，分别用于处理异步操作出错和等待异步操作完成时的占位符UI。

下面是一个使用这个封装Widget的例子：

class MyHomePage extends StatelessWidget {
  final Future<String> futureData = Future.delayed(Duration(seconds: 2), () => "Hello, FutureBuilder!");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FutureBuilder Example'),
      ),
      body: FutureBuilderWidget<String>(
        future: futureData,
        waitingWidget: Center(child: CircularProgressIndicator()),
        builder: (context, data) => Center(child: Text(data)),
        errorBuilder: (context, error) => Center(child: Text('Error: $error')),
      ),
    );
  }
}

在这个例子中，我们定义了一个futureData，它会在2秒后返回一个字符串。在MyHomePage中，我们调用了FutureBuilderWidget，传入了futureData以及builder、errorBuilder和waitingWidget函数，分别定义了异步完成后的UI、异步失败后的UI和等待异步完成时的UI。运行这个例子后，我们会看到一个圆形进度条，等待2秒后，进度条消失，我们看到了异步操作完成后的字符串。如果异步操作出现了错误，我们也会看到一个错误提示。