使用GlobalKey后Flutter组件切换Tab仍重启动画？求解决方案

这是预期行为吗？ #

是预期行为。TabBarView的默认逻辑是：切换到其他Tab时，非当前Tab对应的组件会从组件树中移除，其关联的State会触发dispose()方法。哪怕你给组件设置了GlobalKey，只要组件被移出树，State就会被销毁——你的AnimatedBoxState里的_controller会在dispose()中被销毁，切回原Tab时组件重建，initState()重新执行，动画自然从头开始。

如何阻止动画重置？ #

有两种实用的解决思路：

方法一：用AutomaticKeepAliveClientMixin让组件保持存活

这个Mixin的作用就是告诉Flutter，即使组件不在当前视口，也要保留它的State，不执行dispose()。

修改AnimatedBox的State部分：

class AnimatedBoxState extends State<AnimatedBox>
    with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin { // 混入AutomaticKeepAliveClientMixin
  late final AnimationController _controller;

  @override
  bool get wantKeepAlive => true; // 重写该方法返回true，开启状态保留

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build，否则Mixin不生效
    return FadeTransition(
      opacity: _controller,
      child: Container(width: 100, height: 100, color: Colors.blue),
    );
  }
}

这样切换Tab时，AnimatedBox的State不会被销毁，动画会持续运行，切回时保持之前的进度。

方法二：将动画控制器提升到父组件

把AnimationController移到不会被销毁的父组件（比如MyApp）中，子组件只负责使用控制器。这样即使子组件被重建，控制器的状态依然保留。

修改后的完整代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget { // 改为有状态组件
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  final GlobalKey<AnimatedBoxState> boxKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(tabs: [
              Tab(text: "Box"),
              Tab(text: "Other"),
            ]),
          ),
          body: TabBarView(children: [
            AnimatedBox(key: boxKey, controller: _controller), // 传入控制器
            Center(child: Text("Other tab")),
          ]),
        ),
      ),
    );
  }
}

class AnimatedBox extends StatefulWidget {
  final AnimationController controller; // 接收父组件的控制器
  const AnimatedBox({Key? key, required this.controller}) : super(key: key);

  @override
  AnimatedBoxState createState() => AnimatedBoxState();
}

class AnimatedBoxState extends State<AnimatedBox> {
  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: widget.controller,
      child: Container(width: 100, height: 100, color: Colors.blue),
    );
  }
}

这种方式下，控制器的生命周期和父组件绑定，不会因为子组件的销毁而被回收，动画进度自然不会丢失。

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