如何解决如何在CachedNetworkImage上应用Ink.image?
我希望我的图像在点击时具有墨well效果,以前我可以使用Ink.image小部件来做到这一点,然后提供NetworkImage()作为图像属性,如下所示:
Ink.image(
fit: BoxFit.fitWidth,image: NetworkImage(
product.imageUrl,),
但是现在我要使用CachedNetworkImage(),因为它具有占位符属性来显示我的网络图像的加载状态,但是问题是当我使用cachedNetworkImage时,我无法再用ink.image包裹此小部件,因为它需要将图像作为不添加任何其他小部件。
解决方法
Ink.image
构造函数要求image
参数是ImageProvider
,而不是窗口小部件。您可以像这样使用CachedNetworkImageProvider
代替CachedNetworkImage
:
Ink.image(
fit: BoxFit.fitWidth,image: CachedNetworkImageProvider(
product.imageUrl,)
),
但是,您将失去占位符的功能。但是,您可以使用CachedNetworkImageProvider
createStream方法来获取一个ImageStream
,可以侦听错误和完成情况,并可以创建自己的自定义窗口小部件来基于此流更新UI。
您可以使用 imageBuilder
中的 CachedNetworkImage
并将 imageProvider
传递给 Ink.image
。
这是一个示例代码。
CachedNetworkImage(
imageUrl: "$imagePath",imageBuilder: (context,imageProvider) {
return Ink.image(
image: imageProvider,fit: fit,);
},)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。