0

我希望我的图像在点击时具有墨水池效果，以前我可以使用 Ink.image 小部件来做到这一点，然后将 NetworkImage() 作为图像属性提供，如下所示：

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

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

4

2 回答 2

2

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

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

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

于 2020-10-09T10:53:26.610 回答
1

您可以使用imageBuilderfromCachedNetworkImage并传递imageProviderto Ink.image。

这是一个示例代码。

CachedNetworkImage(
  imageUrl: "$imagePath",
  imageBuilder: (context, imageProvider) {
    return Ink.image(
      image: imageProvider,
      fit: fit,
    );
  },
)
于 2021-06-16T09:21:07.343 回答