如何在Flutter应用中实现右侧滑入式页面导航？

嘿，这个需求完全可以实现！Flutter给了我们好几种方式来统一Android和iOS的页面过渡效果，让Android也能用上iOS那种右侧滑入的导航动画。下面是几个实用的方案，你可以根据自己的需求选：

如果你想完全掌控过渡动画的细节，比如速度、曲线或者额外效果，用PageRouteBuilder自定义路由是最佳选择。这里是一个模拟iOS右侧滑入的示例：

// 自定义右侧滑入路由类
class SlideRightRoute extends PageRouteBuilder {
  final Widget page;

  SlideRightRoute({required this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              SlideTransition(
            position: Tween<Offset>(
              begin: const Offset(1.0, 0.0), // 初始位置在屏幕右侧
              end: Offset.zero, // 最终位置在屏幕中央
            ).animate(
              CurvedAnimation(parent: animation, curve: Curves.easeInOut) // 加入缓动曲线让动画更自然
            ),
            child: child,
          ),
        );
}

// 使用方式：在需要导航的地方调用
Navigator.push(
  context,
  SlideRightRoute(page: const YourTargetPage()),
);

Flutter官方提供了CupertinoPageRoute，它本身就是为iOS风格导航设计的，即使在Android上使用也会生效。这个方案最简单，不用写自定义类：

Navigator.push(
  context,
  CupertinoPageRoute(builder: (context) => const YourTargetPage()),
);

⚠️ 小提醒：用这个路由的话，AppBar的返回按钮会变成iOS风格的左箭头。如果想保留Android的返回按钮样式，可以在新页面的AppBar里手动设置leading属性。

如果想让整个App的所有页面导航都默认使用右侧滑入效果，可以在MaterialApp的主题里配置全局过渡：

MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: const PageTransitionsTheme(
      builders: {
        TargetPlatform.android: CupertinoPageTransitionsBuilder(),
        TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
      },
    ),
  ),
  home: const HomePage(),
);

这样所有通过Navigator.push发起的页面跳转，都会自动使用右侧滑入动画，不用每个路由单独设置。

如果想让过渡效果更逼真，可以在自定义路由里加上阴影和透明度变化，增强层次感：

class SlideRightRoute extends PageRouteBuilder {
  final Widget page;

  SlideRightRoute({required this.page})
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => page,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            // 定义位置和透明度的动画参数
            final offsetTween = Tween(begin: const Offset(1.0, 0.0), end: Offset.zero);
            final opacityTween = Tween(begin: 0.0, end: 1.0);

            // 绑定动画曲线
            final offsetAnimation = offsetTween.animate(
              CurvedAnimation(parent: animation, curve: Curves.easeInOut),
            );
            final opacityAnimation = opacityTween.animate(
              CurvedAnimation(parent: animation, curve: Curves.easeIn),
            );

            return SlideTransition(
              position: offsetAnimation,
              child: FadeTransition(
                opacity: opacityAnimation,
                child: child,
              ),
            );
          },
        );
}

这样动画会更流畅自然，和iOS原生的过渡效果几乎一致。

内容的提问来源于stack exchange，提问作者Ankit Shukla