「这是我参加11月更文应战的第18天，活动概况查看：2021终究一次更文应战」

咱们在上一篇文章中现已经过网络请求获取到了数据，接下来咱们用网络数据来烘托界面；日常开发中，先从网络上获取数据，在获取数据的过程中显现一个加载框，获取到数据之后再烘托界面，这是咱们经常会遇到的事务逻辑；在Flutter中咱们经过StatefulWidget就完全能够完成上述功用；但是在由于这种场景非常常见，因而Flutter专门提供了FutureBuilder和StreamBuilder两个组件用来快速完成这种需要异步更新UI的功用；今日咱们先来学习一下FlutterBuilder如何运用；

FutureBuilder

在Flutter中FutureBuilder定义如下：

const FutureBuilder({
  Key? key,
  this.future,
  this.initialData,
  required this.builder,
})

• future：FutureBuilder依靠的Future，通常是一个异步的耗时使命；
• initialData：初始数据，用户设置的默许数据；
• builder：Widget构造器，其会在Future执行的不同阶段被屡次调用，其签名如下：

Widget Function(BuildContext context, AsyncSnapshot<T> snapshot)

• snapshot：包含当时异步使命的状况信息和成果数据信息；
  • snapshot.connectionState：获取异步使命的状况信息；
  • snapshot.data：获取异步使命的数据信息；
  • snapshot.hasError：判别异步使命是否有错误信息；

在FutureBuilder中，它会依靠一个Future，依据其依靠的Future的状况来构建自身；

如果数据过多的时分，由于咱们需要对数据进行处理现已保存，那么FutureBuilder就不太适用了；

示例

咱们来看一下代码：

FutureBuilder依靠getConversationList方法来构建UI，咱们来看一下print的打印成果：

其在Future的不同阶段被屡次调用；

没有数据的时分，也会烘托，烘托一下占位的部件；有数据的时分，更新界面；

咱们能够依据状况来显现不同的数据：

ListTile

ListTile也是Flutter为咱们提供的另一个小部件，咱们先来看一下终究作用： 代码如下：

运行作用：

• title：此处咱们用来显现用户姓名；
• subtitle：咱们用来显现了用户最新的音讯；
• leading：咱们用来显现了用户的头像，并且运用了圆角；
  • CircleAvatar是Flutter为咱们提供的一个专门用来显现圆形头像运用的小部件，显现作用如下：