Question

我希望我的图像在点击时具有墨well效果，以前我可以使用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。

Answer 2

您可以使用 imageBuilder 中的 CachedNetworkImage 并将 imageProvider 传递给 Ink.image。

这是一个示例代码。

CachedNetworkImage(
  imageUrl: "$imagePath",
  imageBuilder: (context, imageProvider) {
    return Ink.image(
      image: imageProvider,
      fit: fit,
    );
  },
)

如何在CachedNetworkImage（）上应用Ink.image（）？

2 个答案: