Dart 更改图像onclick事件

如何在加载不同图像时实现单击按钮事件

我想在一个div容器中显示不同的图像。如果我点击“changeImage”按钮，它会改变图片

如何用dart语言实现这一点

更新：每次单击都应加载新图像。图像在一个文件中

我用这样的按钮打电话给img吗

    <input type="button" value="button" ng-click="img">

---

根据我对上述评论的回答，有不同的方法可以做到这一点

（未测试）

导入'dart:async'；
const NUM_IMAGES=4；
main（）{
int-mg=1；
（querySelectorAll（'img'）作为HtmlElement）。forEach（（img）{
img.onClick.listen（（e）{
（querySelector（'img{curImg%4}'）作为HtmleElement）；
curImg++；
（querySelector（'#img_${curImg%4}'）作为HtmleElement）.classes.remove（'hidden'）；
});
}

隐藏的{
显示：无；
}

---

替代解决方案：

List uris=['/img/img_a.gif'，'/img/img_b.gif'，'/img/img_c.gif'，'/img/img_d.gif']；
main（）{
int=0；
（imgElement=querySelector（'img'）作为ImageElement）。onClick.listen（（img）{
curImg++；
imgElement.src=uris[curImg]；
});
}

我想了解更多细节会有帮助。是在每次单击后加载一个新图像，还是一次加载所有图像，但只想一次显示其中一个。如果不想在每次单击后加载，则从何处加载图像？如何生成URI？您所说的“图像位于一个文件中”是什么意思？

ng单击

indic说明您正在使用AngularDart，是吗？如果您真的有一个文件包含多个图像，这通常是为了尽量减少一次加载多个图像的请求数量，那么您必须使用的回答中所示的策略之一）谢谢甘特！我会尝试你的解决方案。如果我尝试第一个解决方案，我会得到一个错误：在异常情况下中断：类“ImageElement”没有实例方法“forEach”。抱歉，忘记了QuerySelector。我的答案不显示如何在单击按钮时更新图像，而是在单击图像时更新图像。但是你只有在分配事件处理程序时查询按钮而不是图像。