禁用Flutter Hero反向动画 [英] Disabling Flutter Hero reverse animation

问题描述

给出2条路线，例如父和子以及带有相同标签的Hero（..）小部件。
当用户在父级屏幕上并打开子级时-Hero小部件会被动画化。当它返回时（通过 Navigator.pop ），它也具有动画效果。

Given 2 routes, e.g. parent and a child and a Hero(..) widget with the same tag. When the user is on the "parent" screen and opens a "child" - the Hero widget is animated. When it goes back (via Navigator.pop) it's also animated.

我正在寻找一种方法返回时禁用该动画（通过 Navigator.pop 从孩子到父母）。

I'm looking for a way to disable that animation when going back (from child to parent via Navigator.pop).

是否存在一种处理程序，它将在动画化之前在小部件上调用？然后，我可能可以更改 Hero 标记并解决问题。

Is there a kind of handler which will be called on a widget before it's going to be "animated away" ? Then I probably could change Hero tag and problem solved.

或者，在为路线创建构建器时在父窗口小部件中，我可能会记住对目标窗口小部件的引用，并在调用 Navigator.pop 之前通知它您将被动画化。这还需要使该小部件成为有状态的（我还没有找到一种方法来强制重建无状态小部件）。

Or, when creating a "builder" for a route in parent widget, I could probably remember a reference to a target widget and before calling Navigator.pop notify it about "you are gonna be animated out". That would also require making that widget stateful (I haven't found a way to force rebuild a stateless widget).

有没有更简单的方法来实现此目的？

Is there an easier way of implementing this?

推荐答案

目前，我唯一能想到的方法就是以一种似乎没有动画的方式对弹出的英雄进行动画处理，让我们检查一下这段代码：

The only approach that I can come up at the moment is to "Animate" the popping Hero in a way that seems not animated, let's check this code:

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Hero(
          flightShuttleBuilder: (context, anim, direction, fromContext, toContext) {
            final Hero toHero = toContext.widget;
            if (direction == HeroFlightDirection.pop) {
              return FadeTransition(
                opacity: AlwaysStoppedAnimation(0),
                child: toHero.child,
              );
            } else {
              return toHero.child;
            }
          },
          child: FlatButton(
            child: Text("prev 1"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          tag: "test",
        ));
  }
}

在您的SecondRoute（应该弹出的那个）中必须为英雄提供一个 flightShuttleBuilder 参数，然后您可以检查方向，如果弹出，只需隐藏具有 AlwaysStoppedAnimation 淡入淡出过渡

in your SecondRoute (the one that should pop) you have to supply a flightShuttleBuilder parameter to your Hero then you can check the direction and if it is popping, just hide the Widget with an AlwaysStoppedAnimation fade transition

结果是这样的：

the result is something like this:

我希望这与预期结果类似，当然，您可以完全更改flightShuttleBuilder内部的过渡以改变效果！由您决定：）

I hope that this is something like the expected result, of course, you can completely change the transition inside the flightShuttleBuilder to change the effect! it's up to you :)

这篇关于禁用Flutter Hero反向动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！