Flutter：解决TabBarView切换回首屏时动画重复播放的问题

嘿，这个问题我之前也碰到过！本质原因是TabBarView默认会销毁非当前显示的页面，当你切回第一个Tab时，对应的动画Widget会重新执行initState()，导致动画又被触发了。下面给你两种实用的解决方案：

方案一：用AutomaticKeepAliveClientMixin保留页面状态 #

这个方法能让Tab页面在切换时保持状态，不会被重新初始化，从根源上避免动画重复播放。

修改你的动画Widget代码：

class AnimatedImageWidget extends StatefulWidget {
  final String cardText;
  const AnimatedImageWidget({super.key, required this.cardText});

  @override
  State<AnimatedImageWidget> createState() => _AnimatedImageWidgetState();
}

class _AnimatedImageWidgetState extends State<AnimatedImageWidget> with AutomaticKeepAliveClientMixin {
  AnimationController? _animController;
  Animation<Offset>? _animation;

  @override
  void initState() {
    super.initState();
    _animController = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    )..forward();
    _animation = Tween<Offset>(
      begin: const Offset(1.0, 0.0),
      end: const Offset(0.0, 0.0),
    ).animate(CurvedAnimation(
      parent: _animController!,
      curve: Curves.decelerate,
    ));
  }

  @override
  void dispose() {
    _animController?.dispose();
    super.dispose();
  }

  // 关键：返回true告诉框架要保持这个页面的状态
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用super.build，否则状态保持会失效
    super.build(context);
    return SlideTransition(
      position: _animation!,
      child: SizedBox(
        width: double.maxFinite,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            SizedBox(
              height: 250,
              child: Image.asset('images/hurray.png'),
            ),
            Text(
              widget.cardText,
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

方案二：标记动画是否已播放过 #

如果不想保留整个页面的状态，也可以用一个变量记录动画是否已经执行过，只在首次加载时播放。

修改动画Widget代码：

class AnimatedImageWidget extends StatefulWidget {
  final String cardText;
  const AnimatedImageWidget({super.key, required this.cardText});

  @override
  State<AnimatedImageWidget> createState() => _AnimatedImageWidgetState();
}

class _AnimatedImageWidgetState extends State<AnimatedImageWidget> {
  AnimationController? _animController;
  Animation<Offset>? _animation;
  // 新增变量：标记动画是否已经播放过
  bool _hasPlayedAnimation = false;

  @override
  void initState() {
    super.initState();
    _animController = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    _animation = Tween<Offset>(
      begin: const Offset(1.0, 0.0),
      end: const Offset(0.0, 0.0),
    ).animate(CurvedAnimation(
      parent: _animController!,
      curve: Curves.decelerate,
    ));
    // 只在动画没播放过的时候执行
    if (!_hasPlayedAnimation) {
      _animController?.forward();
      _hasPlayedAnimation = true;
    }
  }

  @override
  void dispose() {
    _animController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _animation!,
      child: SizedBox(
        width: double.maxFinite,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            SizedBox(
              height: 250,
              child: Image.asset('images/hurray.png'),
            ),
            Text(
              widget.cardText,
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

小提示 #

如果你的父组件（就是包含TabBarView的那个页面）会频繁重建，那方案二的_hasPlayedAnimation可能会被重置。这时候更推荐方案一，或者把这个标记变量放到父组件的State里，通过构造函数传递给动画Widget，确保标记不会丢失。

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