Question

我有从 1 号到 9 号的水平按钮列表。所以当我想选择或更好地说选项卡按钮时，该按钮的颜色从白色变为蓝色。我在下面有这个代码，但它不起作用！有人可以帮忙吗？

class btnClass{
  final String buttonText;
  bool changeButtonColor;

  btnClass({this.buttonText, this.changeButtonColor = false});
}
 List<btnClass> listBtnClass = [
      btnClass(buttonText: '1'),
      btnClass(buttonText: '2'),
      btnClass(buttonText: '3'),
      btnClass(buttonText: '4'),
      btnClass(buttonText: '5'),
      btnClass(buttonText: '6'),
      btnClass(buttonText: '7'),
      btnClass(buttonText: '8'),
      btnClass(buttonText: '9'),
    ];
 GridView.count(
                shrinkWrap: true,
                physics: ClampingScrollPhysics(),
                mainAxisSpacing: 10,
                crossAxisSpacing: 10,
                childAspectRatio: 100 / 100,
                crossAxisCount: 10,
                children: listBtnClass.map((btnClass btnChange) {
                  return InkWell(
                    child: Container(
                        decoration: BoxDecoration(
                            color: btnChange.changeButtonColor
                                ? Colors.blue
                                : Colors.white,
                            borderRadius: BorderRadius.circular(5),
                            border: Border.all(color: Colors.grey)),
                        child: Center(
                          child: Text(btnChange.buttonText,
                          style: TextStyle(
                            fontFamily: "IranSans",
                            fontSize: 15,
                          ),
                          ),
                        )),
                    onTap: () {
                      btnChange.changeButtonColor = !btnChange.changeButtonColor;
                    },
                  );
                }).toList()),

Answer 1

为了刷新 Flutter UI，您必须调用 setState()

setState((){
 btnChange.changeButtonColor = !btnChange.changeButtonColor;
});

Answer 2

    class Deneme extends StatefulWidget {
  @override
  _DenemeState createState() => _DenemeState();
}

class _DenemeState extends State<Deneme> {
  List<btnClass> listBtnClass = [
    btnClass(buttonText: '1'),
    btnClass(buttonText: '2'),
    btnClass(buttonText: '3'),
    btnClass(buttonText: '4'),
    btnClass(buttonText: '5'),
    btnClass(buttonText: '6'),
    btnClass(buttonText: '7'),
    btnClass(buttonText: '8'),
    btnClass(buttonText: '9'),
  ];
  @override
  Widget build(BuildContext context) {
    return GridView.count(
        shrinkWrap: true,
        physics: ClampingScrollPhysics(),
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 100 / 100,
        crossAxisCount: 10,
        children: listBtnClass.map((btnClass btnChange) {
          return InkWell(
            child: Container(
                decoration: BoxDecoration(
                    color: btnChange.changeButtonColor
                        ? Colors.blue
                        : Colors.white,
                    borderRadius: BorderRadius.circular(5),
                    border: Border.all(color: Colors.grey)),
                child: Center(
                  child: Text(
                    btnChange.buttonText,
                    style: TextStyle(
                      fontFamily: "IranSans",
                      fontSize: 15,
                    ),
                  ),
                )),
            onTap: () {
              setState(() {
                btnChange.changeButtonColor = !btnChange.changeButtonColor;
              });
            },
          );
        }).toList());
  }
}

class btnClass {
  final String buttonText;
  bool changeButtonColor;

  btnClass({this.buttonText, this.changeButtonColor = false});
}

这是我第一个答案的完整版本。您可以将其与您的代码进行比较。如果您尝试 setState，我无法理解问题出在哪里。但我确定这是有效的，我试过了。

按钮的颜色不会改变颤振/飞镖

2 个答案: