分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何在 Overlay/PopupRoute 中制作 Hero Widget 动画，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

开发过程中遇到如何在 Overlay/PopupRoute 中制作 Hero Widget 动画的问题如何解决？下面主要结合日常开发的经验，给出你关于如何在 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,);
                },);