启用或禁用按钮时以动画方式显示颜色变化

Question

我有一个按钮，启用时颜色为蓝色，禁用时颜色为黑色。我想要的是，当我启用按钮时，颜色应该逐渐从黑色变为蓝色，而不是立即变化，反之亦然。我怎样才能做到这一点？

Answer 1

使用 AnimatedContainer，您可以使用特定的属性构建一次，当使用 setState 等使用不同的值重建它时，它就会为该颜色设置动画。或者如果该值是从外部传递的。

class AnimatedButton extends StatelessWidget {
 final Color widgetColor;

 AnimatedButton({this.widgetColor});

 build(){
  return AnimatedContainer(
   color: widgetColor,
   duration: Duration(seconds: 2),
   child: Text('Some text')
 );
}

您可以在 setState 中更改 _passedInColorValue ，也可以通过在重建时传入与父级不同的值来更改 _passedInColorValue ，容器将为您执行动画。