Flutter :点击时图像未改变

hlswsv35  于 2023-06-24  发布在  Flutter
关注(0)|答案(2)|浏览(152)

我试图创建一个简单的复选框使用两个图像和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)))),
    );
  }
}
guicsvcw

guicsvcw1#

我能够通过将var imgName的声明移到Widget Build之外来使它工作。我还创建了一个特定的函数来更新图像,但这不是严格必要的。有人能解释一下为什么现在能用了吗?

import 'package:flutter/material.dart';

class CustomCheckbox extends StatefulWidget {
  const CustomCheckbox({super.key});

  @override
  State<CustomCheckbox> createState() => _CustomCheckboxState();
}

class _CustomCheckboxState extends State<CustomCheckbox> {
  var imgName = 'images/checkbox_off.png';

  void changeImage() {
    setState(() {
      if (imgName == 'images/checkbox_off.png') {
        imgName = 'images/checkbox_on.png';
      } else {
        imgName = 'images/checkbox_off.png';
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        print("tapped");
        //change the state of the image to checked  or unchecked
        changeImage();
      },
      child: Container(
          width: 20.0,
          height: 20.0,
          decoration: BoxDecoration(
              image: DecorationImage(
                  fit: BoxFit.fill, image: AssetImage(imgName)))),
    );
  }
}
6rvt4ljy

6rvt4ljy2#

在最初的实现中,变量是构建方法的局部变量。这意味着每次调用构建方法时,都会创建imgName变量并将其初始化为'images/checkbox_off.png'。状态变量应该在State类的作用域中。这里有一个教程可以帮助您更好地理解这一点:https://toastguyz.com/dart/dart-variable-scope

相关问题