Flutter如何结合pushAndRemoveUntil实现禁用返回的淡入路由过渡

云原生阿岚

2026-9-3

Flutter 淡入过渡跳转+禁用返回实现方案

pushAndRemoveUntil方法支持传入所有Route子类路由，你不需要修改已有的淡入路由逻辑，直接将方法中原本传入的MaterialPageRoute替换为自定义的FadeRoute，就能同时实现淡入过渡、清除路由栈禁止返回的效果。

核心调用代码

Navigator.pushAndRemoveUntil(
  context,
  // 传入自定义淡入路由，替换默认的MaterialPageRoute
  FadeRoute(page: 目标页面Widget()),
  // 条件恒返回false，清空全部历史路由栈，禁止返回上一页
  (Route<dynamic> route) => false,
);

适配优化建议

原示例中淡入过渡时长设置为3秒，实际生产环境建议调整为300~500毫秒，符合移动端常规交互预期
针对iOS平台默认支持的侧滑返回手势，可以在自定义路由中添加canPop: false属性彻底关闭返回能力，优化后的自定义路由代码如下：

class FadeRoute extends PageRouteBuilder {
  final Widget page;

  FadeRoute({required this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) => page,
          // 调整过渡时长为300毫秒
          transitionDuration: const Duration(milliseconds: 300),
          // 禁止路由弹出，屏蔽iOS侧滑返回
          canPop: false,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) => Container(
            color: Colors.white,
            child: FadeTransition(
              opacity: animation,
              child: child,
            ),
          ),
        );
}