第三百九十回

文章目录

1. 概念介绍
2. 思路与方法
- 2.1 实现思路
- 2.2 实现方法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"如何把异步的CallBack转换成事件流"相关的内容，本章回中将介绍如何延时处理数据.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在上一章回中介绍了回调函数相关的内容，主要是把回调函数转换成了Stream.不过有时候回调函数响应速度太快，页面还没有准备好。因此需要让回调函数响应慢
一些。如何让它变慢呢？这便是本章回的内容：延时处理数据。

2. 思路与方法

2.1 实现思路

我们的实现思路使用Future来实现延时任务，然后在页面中使用FutureBuilder来监听任务的完成状态。我们在前面章回中介绍缓冲组件时也介绍过这个思路，如果大
家忘记的话可以点击这里查看以前的博客。

2.2 实现方法

介绍完实现思路后，我们来介绍实现方法，详细的实现步骤如下：

创建一个Future对象，并且通过delay()方法启动延时功能；
到达指定的时间后开始处理数据，这里相当于延长了回调函数处理数据的时间；
在页面中使用FutureBuilder监听数据的处理过程；
在页面中依据不同的数据处理过程显示不同的数据；

3. 示例代码

///在future中加入延时，以延长事件处理过程
Future<String> delayFunc(int delayTime) {String result = "default";return Future.delayed(Duration(seconds: delayTime,), () {result = "time delay $delayTime s";return Future.value(result);},);
}///在页面中监听数据的处理状态
FutureBuilder(future: delayFunc(3),builder:(context,shotData) {String strState = "init Data";if(shotData.connectionState == ConnectionState.waiting) {strState = " data is waiting";}else if(shotData.connectionState == ConnectionState.none) {strState = " none data";}else if(shotData.connectionState == ConnectionState.done) {strState = "data is: ${shotData.data.toString()}";}else {strState = " unKnown data";}return Text(strState,style: const TextStyle(color: Colors.purpleAccent),);}),

上面的示例代码中把Future封装成了一个独立的方法，在该方法中通过延时操作来实现延时处理数据的功能。运行上面的程序时页面中显示" data is waiting"，等
待3秒后就会显示：“data is:time delay 3 s”，当然了，这里的3秒是一个可以自定义的时间，大家可以依据项目需求来确定它的值，我们也考虑到了它的灵活性，
因此把它封装成了函数的参数，这样在调用函数时灵活传入自定义的时间值就可以。