我试图创建一个简单的复选框使用两个图像和Inkwell小部件。点击它应该会交换图像。
它在调试控制台中正确地输出“tapped”,但是即使我使用setState()函数,图像也没有改变。
知道为什么不管用吗谢谢你
import 'package:flutter/material.dart';
class CustomCheckbox extends StatefulWidget {
const CustomCheckbox({super.key});
@override
State<CustomCheckbox> createState() => _CustomCheckboxState();
}
class _CustomCheckboxState extends State<CustomCheckbox> {
@override
Widget build(BuildContext context) {
var imgName = 'images/checkbox_off.png';
return InkWell(
onTap: () {
print("tapped");
//change the state of the image to checked or unchecked
setState(() {
if (imgName == 'images/checkbox_off.png') {
imgName = 'images/checkbox_on.png';
} else {
imgName = 'images/checkbox_off.png';
}
});
},
child: Container(
width: 20.0,
height: 20.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill, image: AssetImage(imgName)))),
);
}
}
2条答案
按热度按时间guicsvcw1#
我能够通过将var imgName的声明移到Widget Build之外来使它工作。我还创建了一个特定的函数来更新图像,但这不是严格必要的。有人能解释一下为什么现在能用了吗?
6rvt4ljy2#
在最初的实现中,变量是构建方法的局部变量。这意味着每次调用构建方法时,都会创建imgName变量并将其初始化为'images/checkbox_off.png'。状态变量应该在State类的作用域中。这里有一个教程可以帮助您更好地理解这一点:https://toastguyz.com/dart/dart-variable-scope