image - 资产不加载，但是当我热重载时

Question

我是新来的。我从后端获取图像并使用 Hero 和 FadeInImage 在屏幕上显示这些图像。我已经在图像中添加了超链接，并在点击 API 后生成了图像列表。

child: Hero(
                tag: tag,
                child: FadeInImage(
                  width: 130.0,
                  height: 186.0,
                  placeholder: AssetImage('assets/images/splash1.png'),
                  fit: BoxFit.cover,

                  // onTap: _launchUrl(),

                  image: NetworkImage(
                      (merchant.logo)),
                  // fit: BoxFit.cover,
                ),
              ),
            ),
          ),

当我运行我的应用程序时，图像未加载；屏幕是空的。但是当我热重载它显示。

 ...List.generate(
            merchantsList.length,
            (index) {
              print(merchantsList.length);
              print(index);

              return MerchantCard(merchant: merchantsList[index]);

Answer 1

问题实际上是在列表中填充值之前构建了小部件。我在我的 listPopulated 函数上使用了 setState，它工作得很好。

Answer 2

您可以使用占位符图像，也可以添加 Future Builder 概念，请检查 Future Concept。

@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
     }
    },
  );
}