Flutter 按钮点击和按钮颜色控制

Question

我的屏幕上有六个按钮，它们都具有相同的功能。但是我想控制这些按钮被点击的颜色。如果单击按钮，按钮颜色应该是绿色（我正在做这个 buttonColorDisable。）到目前为止一切正常，但在 _buttonFunction() widget.callbackColor();当我调用它时，我希望所有按钮颜色再次改变，但只有最后一个按钮受到影响。其他按钮仍保持绿色。我该如何解决这个问题。

class BuildNumButton extends StatefulWidget {
final int number;
final Color color;
final Color buttonColorDisable;
final Function callbackColor;
final Function callbackList;
final Function callbackScore;
final Function callbackTarget;

const BuildNumButton({
Key? key,
required this.number,
required this.callbackScore,
required this.callbackList,
required this.callbackTarget,
required this.callbackColor,
required this.color,
required this.buttonColorDisable,
}) : super(key: key);

@override
State<BuildNumButton> createState() => _BuildNumButtonState();
}

class _BuildNumButtonState extends State<BuildNumButton> {
bool isButtonVisible = false;

void _buttonFunction() {
isButtonVisible = true;
CalculateScore.sumNumbers(widget.number);
CalculateScore.calculateScore();
widget.callbackScore();
if (CalculateScore.answer == true) {
  if (!CalculateScore.endGame) {
    widget.callbackList();
    widget.callbackColor();
    isButtonVisible = false;
  }
  widget.callbackTarget();
 }
}

@override
Widget build(BuildContext context) {
 return SizedBox(
  width: 150,
  height: 120,
  child: TextButton(
    style: ButtonStyle(
      backgroundColor: isButtonVisible
          ? MaterialStateProperty.all(
              widget.buttonColorDisable) //button color green
          : MaterialStateProperty.all(widget.color),
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
          side: const BorderSide(color: Colors.white, width: 3),
        ),
      ),
    ),
    onPressed: isButtonVisible ? null : _buttonFunction,
    child: Text(
      widget.number.toString(),
      style: numButtonTextStyle,
     ),
   ),
  );
 }
}

Answer 1

我更喜欢创建 List<int> 来保存抽头索引并使用 BuildNumButton extends StatelessWidget。

运行 dartPad。

class BuildNumButton extends StatelessWidget {
  final int number;
  final Color color;
  final Color buttonColorDisable;
  final VoidCallback callback;
  final bool isDisable;

  const BuildNumButton({
    Key? key,
    required this.number,
    required this.color,
    required this.buttonColorDisable,
    required this.callback,
    required this.isDisable,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 150,
      height: 120,
      child: TextButton(
        style: ButtonStyle(
          backgroundColor: isDisable
              ? MaterialStateProperty.all(
                  buttonColorDisable) //button color green
              : MaterialStateProperty.all(color),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
              side: const BorderSide(color: Colors.white, width: 3),
            ),
          ),
        ),
        onPressed: isDisable ? null : callback,
        child: Text(
          number.toString(),
        ),
      ),
    );
  }
}

和VoidCallback用于获取tapEvent并根据条件更新状态。

List<int> disableButtons = [];

.....

...List.generate(
  6,
  (index) => BuildNumButton(
    buttonColorDisable: Colors.green,
    isDisable: disableButtons.contains(index),
    callback: () {
      disableButtons.add(index);

      if (disableButtons.length == 6) disableButtons.clear();
      setState(() {});
    },
    color: Colors.cyanAccent,
    number: index,
  ),
)

Flutter 按钮点击和按钮颜色控制

Flutter Button Click and Button Color Control

colors

button

flutter