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

时间:2018-08-09 07:16:11

标签: dart flutter flutter-animation

我正在尝试在我的第一个flutter应用程序中使用Hero Animations,但是已经有使用诸如this方法实现的底部导航之类的instagram,我发现Hero Animations在嵌套的Navigators中不起作用。

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

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

英雄动画会破裂。

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

因此,任何建议都值得赞赏。

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

有一种可行的天真解决方案:

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

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

1 个答案:

答案 0 :(得分:9)

这是因为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);
  }
}