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

Question

我正在尝试在我的第一个 flutter 应用程序中使用 Hero Animations，但是已经有像底部导航这样的 instagram，它是使用方法实现的，我发现 Hero Animations 在嵌套中不起作用领航员。

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

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

英雄动画会中断。

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

非常感谢任何建议。

更新：我刚刚意识到答案应该在 MaterialApp class 和宾果游戏中！

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

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

但是在 MaterialApp 源代码中事情稍微复杂一些，所以可能有一些隐藏的东西打破了我天真的解决方案。因此问题仍然悬而未决。

Answer 1

这是因为Hero relies on a HeroController which the navigator in 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);
  }
}

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

Hero Animation not working inside nested Navigator

dart

flutter

flutter-animation