Flutter 如何在 ElevatedButton 上设置背景 colored颜色动画

发布于09月09日

当我的ElevatedButton将状态更改为禁用时，我想在两个背景 colored颜色之间创建淡入淡出，我如何才能做到这一点？

final _buttonStyle = ElevatedButton.styleFrom(
  backgroundColor: Colors.white,
  disabledBackgroundColor: Colors.white.withOpacity(0.5),
  animationDuration: const Duration(milliseconds: 0),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
);

我看到有一个AnimationDuration属性，但它似乎只在 colored颜色更改之间创建了一个延迟.没有可见的动画.

推荐答案

你可以用AnimatedSwitcher美元.首先定义此Out of Build方法:

bool isVisible = false;

然后执行以下操作:

AnimatedSwitcher(
          child: SizedBox(
            width: 100,
            key: UniqueKey(),
            child: ElevatedButton(
              onPressed: () {
                setState(() {
                  isVisible = !isVisible;
                });
              },
              child: Text('click'),
              style: ButtonStyle(
                  splashFactory: InkRipple.splashFactory,
                  overlayColor: MaterialStateProperty.resolveWith(
                  (states) {
                    return states.contains(MaterialState.pressed)
                        ? Colors.grey
                        : null;
                     },
                  ),
                  backgroundColor: MaterialStateProperty.all(
                      isVisible ? Colors.red : Colors.green)),
            ),
          ),
          duration: Duration(milliseconds: 500),
  ),