flutter - 如何在 CachedNetworkImage() 上应用 Ink.image()？

Question

我希望我的图像在点击时具有墨水池效果，以前我可以使用 Ink.image 小部件来实现，然后像这样提供 NetworkImage() 作为图像属性:

Ink.image(
    fit: BoxFit.fitWidth,
    image: NetworkImage(
      product.imageUrl,
    ),
),

但是现在我想使用 CachedNetworkImage() 因为它有占位符属性来显示我的网络图像的加载状态但是问题是当我使用 cachedNetworkImage 我不能再用 ink.image 包装这个小部件因为它需要图像作为不属于任何其他小部件。

Answer 1

Ink.image 构造函数要求 image 参数是 ImageProvider，而不是小部件。您可以像这样使用 CachedNetworkImageProvider 而不是 CachedNetworkImage:

Ink.image(
    fit: BoxFit.fitWidth,
    image: CachedNetworkImageProvider(
       product.imageUrl,
   )
),

但是，您将失去占位符容量。但是，您可以使用 CachedNetworkImageProvider createStream获取 ImageStream 的方法，可以监听错误和完成情况，您可以使用它创建自己的自定义小部件，根据此流更新 UI。