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

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

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

然后我尝试了另一种方法并遵循了这篇文章https://medium.com/flutter-community/flutter-route-animations-6ea071be5168。问题是我不想使用 Fade、Scale 等过渡。我有一个都包含在 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> secondaryAnimation,Widget child) {
                                    return Align(
                                      child: FadeTransition(
                                        opacity: animation,child: child,),);
                                  },

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

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

这是 PopupRoute 导航代码：

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

解决方法

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

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