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

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它更适合您的用例,因为如果您的状态在图像完成加载时处理,您将不必担心会发生什么.