首页 文章

如何使用async / HTTP数据在IndexedWidgetBuilder中返回子窗口小部件？

提问于
浏览 次
3

我正在通过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;
  },
);

这有效，但我想将视图与数据完全分开，并根据需要异步请求JSON .

在我有限的经验中，这似乎也可能是一个常见的用例 . 可以将一个异步版本的IndexWidgetBuilder添加到flutter吗？

dart flutter

1 回答

  • 6

    您可以使用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 的好处是，它会处理异步请求完成并且状态已经被处理掉的情况 .

    回复于

相关问题