Flutter：如何在ListView中禁用屏幕外Widget的Hero动画

方案1：通过滚动控制器监听判断Hero可见性 #

无需额外依赖，直接利用ScrollController监听ListView滚动位置，结合Hero组件的固定高度，计算其是否处于视口内，动态控制Hero的启用状态：

class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  final ScrollController _scrollController = ScrollController();
  bool _isHeroVisible = true;
  final double _heroHeight = 200; // 替换为你Hero组件的实际高度

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_checkHeroVisibility);
  }

  void _checkHeroVisibility() {
    final viewportOffset = _scrollController.offset;
    // 滚动偏移小于Hero高度时，判定组件在视口内
    final isVisible = viewportOffset < _heroHeight;
    if (isVisible != _isHeroVisible) {
      setState(() {
        _isHeroVisible = isVisible;
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        controller: _scrollController,
        children: [
          // 动态切换Hero或普通容器
          _isHeroVisible
              ? Hero(
                  tag: 'hero-tag',
                  child: Container(height: _heroHeight, color: Colors.blue),
                )
              : Container(height: _heroHeight, color: Colors.blue),
          // 其他列表项
          ...List.generate(20, (index) => ListTile(title: Text('列表项 $index'))),
        ],
      ),
    );
  }
}

方案2：自定义Hero飞行构建器跳过异常动画 #

通过flightShuttleBuilder参数，在Hero不可见时直接返回静态子组件，避免触发异常动画：

Hero(
  tag: 'hero-tag',
  flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {
    // 结合方案1的_isHeroVisible状态判断
    if (!_isHeroVisible && direction == HeroFlightDirection.pop) {
      // 返回静态组件，跳过Hero动画
      return Container(height: _heroHeight, color: Colors.blue);
    }
    // 正常场景使用默认动画逻辑
    return DefaultHeroFlightShuttleBuilder()(flightContext, animation, direction, fromContext, toContext);
  },
  child: Container(height: _heroHeight, color: Colors.blue),
)

方案3：优化visibility_detector的现有方案 #

你提到担心大量GlobalKey的性能问题，但你的场景中仅需给Page2开头的单个Hero组件添加VisibilityDetector，只需要一个GlobalKey即可，性能影响可以忽略：

VisibilityDetector(
  key: GlobalKey(),
  onVisibilityChanged: (info) {
    setState(() {
      _isHeroVisible = info.visibleFraction > 0;
    });
  },
  child: _isHeroVisible ? Hero(tag: 'hero-tag', child: ...) : Container(...),
)

核心思路总结 #

本质是通过动态控制Hero组件的启用状态，当Hero不在视口内时，让页面返回时不触发Hero动画，从而避免异常效果。优先选择方案1，无依赖且性能最优；方案2适合需要保留Hero组件但跳过动画的场景；方案3是对现有临时方案的优化，可消除性能顾虑。

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