启用或禁用按钮时动画颜色变化答案

【问题标题】：Animate the color change when button is enabled or disabled启用或禁用按钮时动画颜色变化
【发布时间】：2019-02-14 06:13:00
【问题描述】：

我有一个按钮，启用时颜色为蓝色，禁用时为黑色。我想要的是，当我启用按钮时，颜色应该逐渐从黑色变为蓝色，而不是瞬间变为蓝色，反之亦然。我该怎么做？

【问题讨论】：

This 可以给你一个基本的想法
我的按钮是一个无状态的小部件。我不想再写 20 行代码来换一个简单的颜色。
我迟到了一年多，但是即使使用新的 ElevatedButtons 也有解决方案吗？谢谢！

标签： dart flutter

【解决方案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，也可以通过在重建时传入与父级不同的值，容器将为您执行动画。

【讨论】：

能否举个完整的例子。我想过使用无状态小部件，但这似乎是不可能的。
@bnayagrawal 如果您想跟踪小部件中的值，请使用有状态小部件，否则只需使用无状态小部件并从外部传递您的颜色。我不会给出一个完整的例子，但我会添加更多的伪代码，它应该足以给你一个想法。
@bnayagrawal 我编辑了答案以向您展示小部件，只需在您现在使用颜色更改小部件的地方使用它，或者只需将您正在更改颜色的容器替换为动画容器。如果您已经具有颜色更改功能，那么集成应该不难。您只需将 Container 与 AnimatedContainer 交换并添加 Duration。