如何修复点击 Flutter 时的计时器和颜色变化？

Question

我正在尝试创建简单的测试，如果用户单击正确的答案，按钮背景将变为绿色并保持绿色 3 秒。

我用计时器实现了设置状态，但背景变化仍然太即时，因此计时器不起作用。您能否分享一些关于可能出现问题的想法。

这是我的代码

          bool _buttonpressed = false;

          void buttonPressed() {
          setState(() {
          if (_buttonpressed == false) {
          _buttonpressed = true;
          }
          else if (_buttonpressed = true) {
          _buttonpressed = false;
          }
          });
          }


                            FilledButton(
                    onPressed: ()  {
                      
                    setState(() {
                      
                    Future.delayed(const Duration(seconds: 3), () {
                    setState(() {
                       _buttonpressed = !_buttonpressed;
                      });
                    });
                    });
                    },
                    style: ButtonStyle(
                    fixedSize: MaterialStateProperty.all(Size(320, 40)),
                    backgroundColor: MaterialStateProperty.resolveWith<Color>(
                    (Set<MaterialState> states) {
                    if (states.contains(MaterialState.pressed)) return Colors.red;
                    return  Color(0XFFE4DBC8);
                  }, 
                ),
              ),
                      

Answer 1

你可以像这样定义一个按钮：

class DelayedButton extends StatefulWidget {
  final Widget child;
  final VoidCallback onPressed;
  final Duration duration;
  final Color color;
  final Color pressedColor;

  const DelayedButton({
    Key? key,
    required this.child,
    required this.onPressed,
    required this.duration,
    required this.color,
    required this.pressedColor,
  }) : super(key: key);

  @override
  State<DelayedButton> createState() => DelayedButtonState();
}

class DelayedButtonState extends State<DelayedButton> {
  bool _buttonpressed = false;

  @override
  Widget build(BuildContext context) {
    return FilledButton(
      onPressed: () {
        // if button already pressed do nothing
        if (_buttonpressed) return;

        // button has been pressed, update the color now
        setState(() {
          _buttonpressed = true;
        });

        // execute 'onPressed' once the button is clicked
        // widget.onPressed();

        // update the color again, but delay it first
        Future.delayed(
          widget.duration,
          () => setState(() {
            // execute the 'onPressed' after the 'delayed' is complite
            widget.onPressed();
            _buttonpressed = false;
          }),
        );
      },
      style: FilledButton.styleFrom(
        backgroundColor: _buttonpressed ? widget.color : widget.pressedColor,
      ),
      child: widget.child,
    );
  }
}

并像这样使用它：

DelayedButton(
  onPressed: () {
    /* do some stuff with this button */ print('hello');
  },
  duration: const Duration(seconds: 3),
  color: const Color(0XFFE4DBC8),
  pressedColor: Colors.red,
  child: const Text('button'),
),