如何使用flutter_animate在Widget重建时重启动画？

以下是几种可行的解决方案，针对你遇到的场景逐一适配：

方法1：通过唯一Key强制组件重建 #

每次调用setState时，给animate()组件分配一个变化的Key，强制Animate组件重新初始化，从而触发动画重启。示例代码：

// 定义一个随setState更新的变量，比如计数器
int _updateCount = 0;

// 构建Widget时使用ValueKey
Text('Good\nJob!')
  .animate(key: ValueKey<int>(_updateCount))
  .fadeOut(duration: 2000.ms).scaleXY(duration: 2000.ms, end: 2.0)

// 调用setState时更新计数器
setState(() {
  _updateCount++;
});

方法2：使用AnimateController手动控制 #

通过创建独立的动画控制器，在Widget生命周期中手动触发重启操作：

late AnimateController _animateController;

@override
void initState() {
  super.initState();
  _animateController = AnimateController();
}

@override
void didUpdateWidget(covariant oldWidget) {
  super.didUpdateWidget(oldWidget);
  // 组件更新时重启动画
  _animateController.restart();
}

@override
void dispose() {
  _animateController.dispose();
  super.dispose();
}

// 构建代码
Text('Good\nJob!')
  .animate(controller: _animateController)
  .fadeOut(duration: 2000.ms).scaleXY(duration: 2000.ms, end: 2.0)

方法3：利用onRebuild参数直接回调 #

flutter_animate的animate()方法内置了onRebuild参数，可直接指定组件重建时的动画行为：

Text('Good\nJob!')
  .animate(
    autoPlay: true,
    onRebuild: (controller) => controller.restart()
  )
  .fadeOut(duration: 2000.ms).scaleXY(duration: 2000.ms, end: 2.0)

内容的提问来源于stack exchange，提问作者buttonsrtoys