如何使用異步圖像更新佔位符圖像？

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更適合您的用例，因爲如果您的狀態在映像加載完成時處理完畢，您將不必擔心會發生什麼情況。