flutter 点击图片按钮 切换当前更换图片
时间: 2023-07-30 20:09:48 浏览: 228
可以通过在`State`类中定义一个数字类型的变量来控制图片的切换,然后在图片按钮的`onPressed`事件中修改该变量的值,并在`build`方法中根据该变量的值设置当前显示的图片。
代码实现如下:
```dart
class MyImageButton extends StatefulWidget {
@override
_MyImageButtonState createState() => _MyImageButtonState();
}
class _MyImageButtonState extends State<MyImageButton> {
int _imageIndex = 0;
List<String> _imageList = [
"assets/images/image1.png",
"assets/images/image2.png",
"assets/images/image3.png",
];
@override
Widget build(BuildContext context) {
return IconButton(
icon: Image.asset(_imageList[_imageIndex]), // 根据_imageIndex的值设置当前显示的图片
onPressed: () {
setState(() {
_imageIndex = (_imageIndex + 1) % _imageList.length; // 切换_imageIndex的值
});
},
);
}
}
```
在上述代码中,我们通过在`State`类中定义了一个数字类型的变量`_imageIndex`,并定义了一个图片路径的列表`_imageList`,然后在图片按钮的`onPressed`事件中修改`_imageIndex`的值,然后在`build`方法中根据`_imageIndex`的值设置当前显示的图片。
在`setState`方法中计算`_imageIndex`的值时,使用了取余运算符`%`,这样可以实现循环切换图片的效果。例如,如果`_imageList`列表中有3张图片,当`_imageIndex`的值为0时,下一次点击图片按钮时,`_imageIndex`的值会变成1,再下一次点击时,`_imageIndex`的值会变成2,再下一次点击时,`_imageIndex`的值又会变成0,以此类推。
阅读全文