如何滑动到右侧的新页面而不是颤动的底部？

Posted 2023-04-13

【中文标题】如何滑动到右侧的新页面而不是颤动的底部？

【英文标题】：How to slide to new page on the right instead of the bottom in flutter?

【发布时间】：2018-11-15 04:50:34

【问题描述】：

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

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

【问题讨论】：

How to Change Navigation Animation using Flutter的可能重复

【参考方案1】：

查看CupertinoPageRoute：

用 ios 转换替换整个屏幕的模态路由。

页面从右侧滑入，反向退出。当另一个页面进入覆盖它时，该页面也会以视差向左移动。

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

在flutter gallery 示例应用中有一个演示：

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

【讨论】：

将 fullscreenDialog 更改为 false，如文档所述：'页面从底部滑入并反向退出，全屏对话框没有视差效果。 '

【参考方案2】：

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

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