如何循环通过图像列表，而不需要在dart中加载图像?

Question

在我的应用程序中，我有一个InkWell当你点击它时，我想把它变成另一个图像。我已经设置了一个列表，其中onTap简单地通过列表循环到下一个图像。问题是，当你点击它时，下一张图片需要半秒才能加载。我希望能够在点击它时立即显示图像。

int index = 0;
@override
Widget build(BuildContext context) {
List images = [
Image.asset('assets/image0.jpg'),
Image.asset('assets/image1.jpg'),
Image.asset('assets/image2.jpg'),
Image.asset('assets/image3.jpg'),
];
return InkWell(
onTap: () {
setState(() {
index++;
});
},
child: images[index],
);
}

这是我当前的代码

Answer 1

加载下一张图片需要半秒的时间

这可能是因为您的images的List在您的build方法中，因此它重建每个setState。

将List移出build方法的:

int index = 0;
List images = [
Image.asset('assets/image0.jpg'),
Image.asset('assets/image1.jpg'),
Image.asset('assets/image2.jpg'),
Image.asset('assets/image3.jpg'),
];
@override
Widget build(BuildContext context) {

return InkWell(
onTap: () {
setState(() {
index++;
});
},
child: images[index],
);
}