Flutter AnimatedDigit Widget如何避免重建时重复执行动画？

当前键盘弹出/消失时，组件因重建触发动画，核心是要让动画仅在value真正变化时执行，而非每次重建都触发。

方案：在自定义State中维护当前值，仅当传入的value变化时更新 #

通过在State类中缓存当前显示的数值，只有当外部传入的value与缓存值不同时，才更新并触发动画。这样即使父组件重建（如键盘弹出），只要数值未变，就不会触发动画。

修改后的代码：

class AnimatedDigit extends StatefulWidget {
  final int value;
  const AnimatedDigit({super.key, required this.value});

  @override
  State<AnimatedDigit> createState() => _AnimatedDigitState();
}

class _AnimatedDigitState extends State<AnimatedDigit> {
  late int _currentValue;

  @override
  void initState() {
    super.initState();
    // 初始化时缓存初始值
    _currentValue = widget.value;
  }

  @override
  void didUpdateWidget(covariant AnimatedDigit oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 仅当传入的value发生变化时，才更新缓存值并触发动画
    if (oldWidget.value != widget.value) {
      setState(() {
        _currentValue = widget.value;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedDigitWidget(
      value: _currentValue,
      duration: const Duration(milliseconds: 2000),
      textStyle: AppTextStyles.recoletaH1Regular,
    );
  }
}

原理说明 #

• _currentValue作为本地缓存的数值，绑定到AnimatedDigitWidget的value参数
• didUpdateWidget方法会在组件接收新参数时调用，这里对比新旧value，仅在数值变化时更新缓存，触发setState从而启动动画
• 父组件重建时（如键盘弹出），若value未变，_currentValue保持不变，AnimatedDigitWidget不会触发动画

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