导航到下一页时，如何从下到上为下一页设置动画答案

【问题标题】：How can I animate my next page from bottom to top when I navigate to it导航到下一页时，如何从下到上为下一页设置动画
【发布时间】：2021-05-17 06:55:40
【问题描述】：

我想创建一个应用程序，当我导航到其他页面时，它会从屏幕底部到顶部进行动画处理（例如，当我们在 android 中单击 facebook 中的评论按钮时，不确定 ios 会从底部弹出评论页面页面）我希望该页面及其属性处于颤动状态，我可以将该页面拖到底部以导航回上一页。我希望有人能理解我想说的话。我只需要在其他页面上导航，并且当我导航到其他页面时，它会显示从底部到顶部的漂亮过渡

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您可以通过将fullscreenDialog 设置为true 来实现。例如，库比蒂诺：

Navigator.of(context).push(
  CupertinoPageRoute(
    fullscreenDialog: true,
    builder: (context) {
      return YourScreen();
    },
  ),
);

材质：

await Navigator.of(context).push(
  MaterialPageRoute(
    fullscreenDialog: true,
    builder: (context) {
      return YourScreen();
    },
  ),
);

您可以使用上述示例之一，但 Cupertino 可能适合您的需要。

【讨论】：

【解决方案2】：

您应该使用自定义页面转换！

您可以在https://flutter.dev/docs/cookbook/animation/page-route-animation了解更多信息

【讨论】：

【解决方案3】：

对于动画你必须使用 PageRouteBuilder[https://flutter.dev/docs/cookbook/animation/page-route-animation]

class AnimatedRoute extends PageRouteBuilder {
  final Widget widget;

  AnimatedRoute(this.widget)
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => widget,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            var begin = Offset(0.0, 1.0);
            var end = Offset.zero;
            var tween = Tween(begin: begin, end: end);
            var offsetAnimation = animation.drive(tween);
            return SlideTransition(
              position: offsetAnimation,
              child: child,
            );
          },
        );
}

您只需将所需的页面作为小部件传递

return AnimatedRoute(YourWidget());

我想这会有所帮助。

【讨论】：