如何在右侧滑动到新页面而不是向下滑动？

Question

将新页面转移到焦点的默认颤动动画是从底部向上滑动.如何更改此行为并从右侧或左侧滑入新页面？

      Navigator.push(
        context,
          new PageRouteBuilder(
          pageBuilder: (BuildContext context, _, __) {
            return new SearchView();
          }
          )
      );

Answer 1

您可以使用您想要的动画创建一个函数

Route createRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(1.0, 0.0);
      const end = Offset.zero;
      const curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

每次推到新屏幕时都会调用它

Navigator.of(context).push(createRoute(SearchView()))

如果你想改变方向，你需要改变偏移量begin 如果你想改变效果，你需要改变SlideTransition

Answer 2

查看CupertinoPageRoute:

一种模态路线,用iOS过渡替换整个屏幕.

页面从右侧滑入,然后反向退出.当另一页进入以覆盖它时,页面也会在视差中向左移动.

页面从底部滑入并反向退出,对全屏对话框没有视差效果.

在flutter gallery示例应用程序中有一个演示:

Navigator.of(context, rootNavigator: true).push(
  new CupertinoPageRoute<bool>(
    fullscreenDialog: true,
    builder: (BuildContext context) => new Tab3Dialog(),
  ),
);