dart - 如何使用异步/HTTP 数据返回 IndexedWidgetBuilder 中的子小部件？

Question

我正在通过 HTTP 获取 JSON 数据并将其显示在 ListView 中。因为是 HTTP，所以都是异步的。

Here's what I'd like to do:

var index = new ListView.builder(
  controller: _scrollController,
  itemBuilder: (ctx, i) async {
    _log.fine("loading post $i");
    var p = await _posts[i];
    return p == null ? new PostPreview(p) : null;
  },
);

很遗憾，这在 IndexedWidgetBuilder 之后不起作用必须是同步函数。如何使用 Future 为 IndexedWidgetBuilder 构建子项？似乎没有办法 wait for the future to complete同步。

以前，我将数据加载到数组中，并且仅使用 IndexedWidgetBuilder 函数 checked to see if the list elements existed在返回子小部件之前。

var index = new ListView.builder(
  controller: _scrollController,
  itemBuilder: (ctx, i) {
    _log.fine("loading post $i");
    return _posts.length > i ? new PostPreview(_posts[i]) : null;
  },
);

这可行，但我想将 View 与数据完全分离，并根据需要异步请求 JSON。

根据我有限的经验，这似乎也是一个常见的用例。可以在 Flutter 中添加 IndexWidgetBuilder 的异步版本吗？

Answer 1

您可以使用 FutureBuilder 等待异步计算.我可能会更改您的 PostPreview 以将 Future 作为构造函数参数并将 FutureBuilder 放在那里，但是如果您想离开 PostPreview 原样，这是修改 itemBuilder 的方法。

var index = new ListView.builder(
  controller: _scrollController,
  itemBuilder: (ctx, i) {
    return new FutureBuilder(
      future: _posts[i],
      builder: (context, snapshot) {
        return snapshot.connectionState == ConnectionState.done
               ? new PostPreview(snapshot.data)
               : new Container(); // maybe a show placeholder widget?
    );
  },
);

FutureBuilder 的好处在于它可以处理异步请求完成并且您的状态已经被释放的场景。