flutter - 将 FutureBuilder 与 NetworkImage 结合使用的规范方式

Question

如果图像已经加载，我希望能够在单个微任务中获取网络图像。但是，使用 NetworkImage 和 FutureBuilder 中可用的当前 API，这似乎是不可能的。

这就是我们通常连接两者的方式:

NetworkImage imageProvider = getSomeNetworkImage(id);
Completer<ui.Image> completer = Completer<ui.Image>();
imageProvider.resolve(ImageConfiguration()).addListener(
    (ImageInfo info, _) => completer.complete(info.image));

return FutureBuilder<ui.Image>(
   future: completer.future,
   builder: (BuildContext futureBuilderContext, AsyncSnapshot<ui.Image> snapshot) {
     if (!snapshot.hasData) {
       return _buildPlaceholder();
     } else {
       return _buildActual(context, snapshot.data, imageProvider);
     }
   },
);

如果图像已经存在，addListener() 会立即调用 completer.complete()。然而，FutureBuilder 是基于 completer.future 的，它直到下一个微任务才完成。因此，即使图像可用，也会立即显示占位符。

避免这种情况的最佳方法是什么？也许，imageProvider 应该公开一个 Future 来阻止我们通过完成器传递它？

Answer 1

我不使用 FutureBuilder，而是利用传递给 ImageStream 监听器的 syncCall 参数。这将告诉您图像是否立即解析，这意味着它已经被缓存。否则，您可以调用 setState 并在完成时触发重建。

class Example extends StatefulWidget {
  const Example({Key key, this.image, this.child}): super(key: key);

  final ImageProvider image;
  final Widget child;

  @override
  State createState() => new ExampleState();
}

class ExampleState extends State<Example> {
  bool _isImageLoaded = false;    

  @override
  void initState() {
    widget.image
     .resolve(const ImageConfiguration)
     .addListener(_handleResolve);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // if syncCall = true, then _handleResolve will have already been called.
    if (_isImageLoaded)
      return new Image(widget.image);
    return widget.child;
  }

  void _handleResolve(ImageInfo info, bool syncCall) {
    _isImageLoaded = true;
    if (!syncCall) {
     // we didn't finished loading immediately, call setState to trigger frame
      setState(() { });
    }
  }
}