第一百三十四回 自定义缓冲组件

我们在上一章回中介绍了StreamProvider组件相关的内容，本章回中将介绍 自定义缓冲组件.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里介绍的缓冲组件是一种用来显示页面数据的组件，如果页面中有数据就显示数据否则显示一个圆形进度条，这个进度条表示在刷新数据，或者缓冲数据，因此我们叫它缓冲组件。缓冲组件不属性官方SDK中的组件，它是我们自定义的一种组件，本章回中将详细介绍如何去自定义该组件。

实现方法

我们先介绍一下实现该组件的思路：使用异步的方式刷新数据，同时监听数据的变化，如果刷新数据成功就显示数据，否则显示进度条，直到数据刷新成功为止。

异步操作使用Future实现，监听数据变化使用FutureBuilder组件。有了思路后，我们介绍一下具体的实现方法：

1. 创建一个FutureBuilder组件；
2. 给组件的future属性赋值，该过程主要是实现数据刷新功能；
3. 给组件的builder属性赋值，它用来创建组件中显示的内容：刷新图标和数据；

示例代码

介绍完缓冲组件的实现思路和具体方法后，我们通过示例代码来演示，详细如下：

class CustomerAsyncWidget extends StatelessWidget {
  final Future _future;

  const CustomerAsyncWidget(this._future, {super.key});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: _future,
        builder: (context, data) {
          if (data.connectionState == ConnectionState.done) {
            return Text('data is : ${data.data}');
          } else {
            ///判断返回结果是否有错误
            if(data.hasError) {
              return const Icon(Icons.error);
            }else {
              ///backgroundColor是不有完成进度的颜色，color是完成的进度颜色
              return const CircularProgressIndicator(color: Colors.green,backgroundColor: Colors.yellow);
            }
          }
        },);
  }
}

在上面的代码中我们把自定义的缓冲组件封装成了独立的方法，使用时只需要直接赋值给其它组件的child属性就可以，不过需要在构造方法中传入一个Future对象，该对象用来实现刷新数据的功能。

此外，该组件还有一个缺点：只能照显示少量数据，因为代码中显示数据的组件是Text，如果数据量大的话可以换成ListView，这个扩展就离给各位看官去实现吧。编译并且运行上面的程序，就会在页面上显示圆形的进度条，表示正在刷新数据，数据刷新完成后它就会消失，同时显示数据内容。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

看官们，与"自定义缓冲组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!