Question

我正在使用管理器类从缓存中提取图像或发出网络请求。我正在使用占位符图像。在检索到正确的图像时，替换占位符图像的最佳方法是什么？

final ItemManager _manager;
final Item _item;
var _itemImage =
  new Image.asset('assets/images/icons/ic_placeholder.png');

@override
Widget build(BuildContext context) {
  _loadImage();
  return new Container(
    child: _itemImage,
  );
}

_loadImage() async {
  var file = await _manager.itemImageForImageUrl(_item.imageUrl);
  _stickerImage = new Image.file(file);
}

Answer 1

FutureBuilder类专为此类案例而设计。我会修改_loadImage以返回图像，而不是设置成员变量。然后你可以删除initState并修改你的build()方法，如下所示：

@override
Widget build(BuildContext context) {
  return new FutureBuilder(
    future: _loadImage(),
    builder: (BuildContext context, AsyncSnapshot<Image> image) {
      if (image.hasData) {
        return image.data;  // image is ready
      } else {
        return new Container();  // placeholder
      }
    },
  );
}

顺便说一句，如果不调用State，就不应该改变setState的成员变量。你的构建函数不会被调用，这是linter最终会抱怨的东西（一旦我们实现它）。但FutureBuilder更适合您的用例，因为如果您的状态在图像加载完毕后处理，您将不必担心会发生什么。

Answer 2

我建议使用flutter_image＆＃34;使用重试机制从网络加载图片。＆＃34;

您可以将其与占位符配对，如下所示：

new FadeInImage(
  placeholder: _itemImage,
  image: new NetworkImageWithRetry('https://example.com/img.jpg'),
),

如何使用异步图像更新占位符图像？

2 个答案: