英雄动画在嵌套导航器中不起作用答案

【问题标题】：Hero Animation not working inside nested Navigator英雄动画在嵌套导航器中不起作用
【发布时间】：2023-03-03 11:08:02
【问题描述】：

我正在尝试在我的第一个 Flutter 应用程序中使用 Hero Animations，但已经有类似底部导航的 Instagram，它使用 this 方法实现，我发现 Hero Animations 在嵌套导航器中不起作用。

例如，您可以从here 获取完整示例，并将home: MainScreen(), 从HeroApp 类替换为

home: Navigator(onGenerateRoute: (_) {
  return MaterialPageRoute(builder: (_) => MainScreen());
}),

英雄动画会中断。

也许还有其他一些方法可以实现底部导航，每个选项卡都有独立的堆栈，不使用嵌套导航器，但我还没有找到。

非常感谢任何建议。

UPD：我刚刚意识到答案应该在 MaterialApp 类和宾果游戏中！

有一种可行的简单解决方案：

home: Navigator(
  onGenerateRoute: (_) => MaterialPageRoute(builder: (_) => MainScreen()),
  observers: [HeroController()],
),

但是在MaterialApp 源代码中，事情有点复杂，所以也许有一些隐藏的东西，打破了我幼稚的解决方案。因此问题仍然悬而未决。

【问题讨论】：

你不应该嵌套Navigator开始
@RemiRousselet hm，但是this 的答案（实际上是由 Flutter 团队的工程师制作的）建议 Navigator 嵌套。那么我应该如何为每个选项卡实现带有独立堆栈的底部导航呢？
Navigator 不支持良好的嵌套，因为它破坏了一些东西，例如 Hero；它们直接关联到导航器实例。这个答案很老了。根据您的需求，可能会有更好的方法来满足您的需求。
嗨@RémiRousselet Navigator 类文档有一个关于“嵌套导航器”的部分。在这种情况下，英雄动画会一直中断吗？
@Mikhail，非常感谢！！！我一直想知道为什么英雄动画在嵌套导航器中不起作用。我在同时运行的多个选项卡上查看了很多示例，并且确实所有示例都有自己的导航器（以跟踪其自己的堆栈），并且您的解决方案只需一行简单的代码即可修复所有内容，并且动画现在可以正常工作！我会给你1000分。谢谢！

标签： dart flutter flutter-animation

【解决方案1】：

这是因为Hero 依赖于HeroController，MaterialApp 中的导航器具有但您的自定义导航器没有，要解决此问题只需添加控制器，就像这样。

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  HeroController _heroController;

  @override
  void initState() {
    super.initState();
    _heroController = HeroController(createRectTween: _createRectTween);
  }

  @override
  Widget build(BuildContext context) {
    return Navigator(
      observers: [_heroController],
      onGenerateRoute: (settings) {
        return MaterialPageRoute(
            settings: settings, builder: (context) => Text(''));
      },
    );
  }

  RectTween _createRectTween(Rect begin, Rect end) {
    return MaterialRectArcTween(begin: begin, end: end);
  }
}

【讨论】：

考虑重构它以使用 HeroControllerScope 小部件。