先注释掉执行的这个 fetchPosts ...

这个 fetchPosts 返回是一个 Future .. 我们可以根据这个 Future 去构建小部件 .. 要用的是 FutureBuilder ..

这里用一下这个 FutureBuidler .. 它需要一个 future .. 这里我们可以直接执行一下 fetchPosts .. 再添加一个 builder 方法 .. 使用它可以构建需要的小部件 .. 方法有两个参数 .. 一个是 BuildeContext 类型的 context 参数 .. 还有一个是 AsyncSnapshot 类型的 snapshot .. 这个 snapshot 里面会带着 Future 上的数据 ..

先简单的返回一个 Container ..

然后再试一下... 可以输出 snapshot 里的这个 data 属性的值 .. 一个前缀 .. data: ... 加上 snapshot 里的 data 的值 ..

hot restart 一下 ..

在控制台上，你会看到最终在 Future 上出现的数据 .. 要注意的是第一次输出这个 snapshot.data 的时候，它的值是 null .. 说明 Future 上还没有数据 .. 过一会儿，Future 有数据了，又会输出这些数据 .. 因为 Future 是异步的动作 ..

这里我们再输出一个 snapshot 里的 connectionState .. 表示连接的状态 .. 再 hot restart 一下 ..

snapshot 上的数据是 null 的时候，这个 connectionState 的值是 ConnectionState.waiting ... 表示等待 ..

有了数据以后 .. 这个 connectionState 的值就会变成 ConnectionState.done ..

这样这个 FutureBuilder 返回的小部件，可以根据 connectionState 的值动态返回 ..

用一个 if .. 判断一下，看看 snapshot.connectionState .. 的值是不是等于 ConnectionState.waiting .. 如果是的话 ... 我们可以 return 一个 Center 小部件 .. 小部件的 child 是个 Text ... 显示的文字是 loading...

这样没有准备好数据之前，界面上会显示这个 loading 文字 ..

准备好了数据 .. 我们可以 return 一个 ListView .. 列表视图 .. 设置一下它的 children 属性 .. 它的值是个列表，这里用一下 snapshot.data 上的 map 方法 .. 返回的是 Widget .. 当前项目叫 item ..

return 的是个 ListTile 小部件 .. 设置一下它的 title .. 值是个 Text .. 文字是 item 上的 title 的值 ..

再添加一个 subtitle .. 它的值也是一个 Text .. 要显示的文字是 item.author ..

然后再添加一个 leading .. 这个属性的值是个 CircleAvatar .. 给它一个 backgroundImage 设置一下背景图像 .. 图像来自网络，用一个 NetworkImage .. 值是 item.imageUrl ..

最后再执行一下 toList 这个方法 ..

保存一下 ... 数据没准备好之前会在界面上显示一个 loading ..

准备好以后 .. 就会显示一个列表视图 ..