Flutter-英雄动画无法与标签导航器一起使用

时间:2020-04-29 11:26:26

标签: flutter animation flutter-layout flutter-animation

我是新手,我正在使用英雄小部件制作浮动按钮的动画。

我具有底部导航,并且必须使用标签导航器打开页面。但是英雄动画无法正常工作。

我使用了所有可能的解决方案,但英雄动画仍然无法用于页面路由。

这是我的代码段。

FloatingActionButton(
          onPressed: () {
            _selectTab(TabItem.Floating);
          },
          child: Icon(Icons.add),
          heroTag: "tag",
        ),

这是单击以显示fab按钮以打开新页面

 void _selectTab(TabItem tabItem) {
    if (tabItem == currentTab) {
      // pop to first route
      _navigatorKeys[tabItem].currentState.popUntil((route) => route.isFirst);
    } else {
      setState(() => currentTab = tabItem);
    }
  }

在导航器中

 @override
  Widget build(BuildContext context) {
    var routeBuilders = _routeBuilders(context);
    return Navigator(
        observers: [
          HeroController(),
        ],
        key: widget.navigatorKey,
        initialRoute: TabNavigatorRoutes.root,
        onGenerateRoute: (routeSettings) {
          return PageRouteBuilder(
              transitionDuration: Duration(seconds: 1),
              pageBuilder: (_, __, ___) =>
                  routeBuilders[routeSettings.name](context));
        });
  }

路线

 if (widget.tabItem == TabItem.Floating) {
          return ActFloatingScreen(
            title: 'Floating Tab',
            onPush: (materialIndex) =>
                _push(context, materialIndex: materialIndex),
          );
        }

 void _push(BuildContext context, {int materialIndex: 500}) {
    var routeBuilders = _routeBuilders(context, materialIndex: materialIndex);
    Navigator.push(
        context,
        PageRouteBuilder(
            transitionDuration: Duration(seconds: 1),
            pageBuilder: (_, __, ___) =>
                routeBuilders[TabNavigatorRoutes.detail](context)));
  }

最后是我想用英雄动画打开的我想要的课程

return Scaffold(
      backgroundColor: Colors.white,
      body: Hero(
        tag: "tag",
        child: Stack(
          overflow: Overflow.visible,
          children: <Widget>[
            Container(
              color: Colors.green,
              height: 200,
            ),
            PositionedDirectional(
              start: 0,
              end: 0,
              top: 150,
              child: Center(
                  child: Icon(
                    Icons.add,
                    size: 100,
                  )),
            ),
          ],
        ),
      ),
    );

0 个答案:

没有答案