如何在 Overlay/PopupRoute 中制作 Hero Widget 动画

Question

我有一个设置页面，其中的选项在单击时会显示一个弹出窗口，因为它放不下一个小容器。我使用 Overlay 来显示弹出窗口 (Overlay.of(context).insert(OverlayEntry());)。问题是它会原地弹出，没有动画。

然后我尝试了另一种方法并遵循了这篇文章 https://medium.com/flutter-community/flutter-route-animations-6ea071be5168。问题是我不想使用 Fade、Scale 等过渡。我有一个 both 包裹在 Hero 小部件中，所以我希望设置在单击时展开，在弹出时缩小。

在应用程序的欢迎页面上，我有类似的内容：Welcome Page Screen Recording 我使用以下代码实现了这一点：

onPressed: () => Navigator.of(context).push(
                                PageRouteBuilder(
                                  transitionDuration:
                                      Duration(milliseconds: 600),
                                  pageBuilder: (BuildContext context,
                                      Animation<double> animation,
                                      Animation<double> secondaryAnimation) {
                                    return LogInMock();
                                  },
                                  transitionsBuilder: (BuildContext context,
                                      Animation<double> animation,
                                      Animation<double> secondaryAnimation,
                                      Widget child) {
                                    return Align(
                                      child: FadeTransition(
                                        opacity: animation,
                                        child: child,
                                      ),
                                    );
                                  },
                                ),
                              ),

两个容器具有相同的英雄标签和非常相似的结构。

我尝试使用 PopupRoute（来自上面的媒体文章）来执行此操作，但它会在没有 Hero 动画的情况下淡入：Settings Page Screen Recording。我使用相同的小部件，因此它具有相同的结构和英雄标签。为了确保这不是我的小部件的问题，我制作了一个用 Hero 包裹的容器，我得到了相同的结果。

PopupRoute导航代码如下：

Navigator.push(
              context,
              CustomPopupRoute(
                pageBuilder: (BuildContext context, Animation<double> animation,
                    Animation<double> secondaryAnimation) {
                  return Test();
                },
                transitionsBuilder: (BuildContext context,
                    Animation<double> animation,
                    Animation<double> secondaryAnimation,
                    Widget child) {
                  return FadeTransition(
                    opacity: animation,
                    child: child,
                  );
                },
              ),
            );

Answer 1

这是 Flutter 的当前限制，因此不可能，Flutter GitHub 存储库中存在一个问题。

https://github.com/flutter/flutter/issues/48467

如何在 Overlay/PopupRoute 中制作 Hero Widget 动画

How do I make a Hero Widget Animate in an Overlay/PopupRoute

widget

dart

flutter