Flutter 中常见的几种页面跳转方式

90后的晨仔2025-06-04 11:20

在 Flutter 中，页面跳转（导航） 是通过 Navigator 实现的，虽然不像 iOS 有明显的 push 和 present 两套机制，但本质上也可以实现类似的效果。Flutter 提供了多种跳转方式，适用于不同场景。

✅ 一、Flutter 中常见的几种页面跳转方式

跳转方式 对应方法 类似 iOS 的 用途场景
1. 普通 push Navigator.push() UINavigationController.pushViewController 常用的入栈式跳转，带返回按钮
2. 替换 push Navigator.pushReplacement() present then dismiss current 用新页面替换当前页面（无法返回）
3. 清空并跳转 Navigator.pushAndRemoveUntil() reset stack and push 清空某些或全部栈后再跳转，用于登录后跳主页
4. 带返回值跳转 Navigator.push() + await + pop(result) present + delegate/closure 从下个页面获取数据返回
5. 弹窗式跳转 showDialog() / showModalBottomSheet() presentViewController: animated 类似 iOS 的 modal 弹窗跳转
6. 命名路由跳转 Navigator.pushNamed() 等 storyboard segue 使用统一的路由配置跳转
7. 非 Navigator 跳转（用于组件） PageView, TabController 等 UIViewControllerContainer 不改变路由栈，仅界面变化

✅ 二、Flutter 中常用跳转写法示例

1.普通跳转（push）

less 复制代码 
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailPage()),
);

2.替换当前页面（pushReplacement）

less 复制代码 
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => LoginPage()),
);

3.清空历史栈并跳转（pushAndRemoveUntil）

javascript 复制代码 
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => HomePage()),
  (route) => false, // false 表示移除所有旧页面
);

4.带返回值跳转（push + pop）

javascript 复制代码 
// 跳转并等待返回结果
final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => InputPage()),
);

// 在 InputPage 中返回数据
Navigator.pop(context, "你填写的内容");

5.弹窗跳转（Modal）

Alert 弹窗

less 复制代码 
showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text("提示"),
    content: Text("是否确认？"),
    actions: [
      TextButton(onPressed: () => Navigator.pop(context, false), child: Text("取消")),
      TextButton(onPressed: () => Navigator.pop(context, true), child: Text("确认")),
    ],
  ),
);

底部弹窗

less 复制代码 
showModalBottomSheet(
  context: context,
  builder: (context) => Container(height: 200, child: Center(child: Text("底部弹窗内容"))),
);

6.命名路由跳转（pushNamed）

main.dart:

javascript 复制代码 
routes: {
  '/': (context) => HomePage(),
  '/detail': (context) => DetailPage(),
},

使用跳转：

arduino 复制代码 
Navigator.pushNamed(context, '/detail');

✅ 三、总结对比（Flutter vs iOS）

Flutter 跳转 iOS 对应方式 是否可返回
push navigationController.push ✅ 是
pushReplacement present -> dismissSelf ❌ 否
pushAndRemoveUntil resetRootController ❌ 否
showDialog / bottom presentModal ✅ 是
pushNamed segue(identifier) ✅ 是

✅ 四、实际开发建议

场景 建议跳转方式
页面间常规跳转 Navigator.push()
登录跳主页 pushAndRemoveUntil()
填写数据并返回 push() + pop(result)
弹窗提示或确认 showDialog()
使用统一路由管理 pushNamed()

✅ 五、Flutter 的高级页面跳转

  • ✅ 自定义转场动画

  • ✅ Flutter Boost 的混合跳转

  • ✅ iOS 风格的 modalTransitionStyle 控制

下面我来为你 完整梳理 + 示例封装，助你项目中灵活使用跳转效果。

✅ 1. 自定义转场动画（类似 iOS push/pop 动画控制）

🔧 封装方式：

PageRouteBuilder

less 复制代码 
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => YourPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 渐隐渐现动画
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
    transitionDuration: Duration(milliseconds: 500), // 动画时间
  ),
);

✅ 常用动画封装（抽取函数）：

less 复制代码 
Route createFadeRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (_, __, ___) => page,
    transitionsBuilder: (_, anim, __, child) =>
        FadeTransition(opacity: anim, child: child),
    transitionDuration: Duration(milliseconds: 400),
  );
}

Route createSlideFromBottom(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (_, __, ___) => page,
    transitionsBuilder: (_, anim, __, child) =>
        SlideTransition(position: Tween(begin: Offset(0, 1), end: Offset.zero).animate(anim), child: child),
    transitionDuration: Duration(milliseconds: 400),
  );
}

使用：

less 复制代码 
Navigator.push(context, createSlideFromBottom(MyPage()));

✅ 2. Flutter Boost 混合跳转（Flutter + Native 混合栈）

Flutter Boost 是阿里巴巴开源的一个解决 混合栈导航问题 的工具，特别适用于：

  • Native App 中嵌入 Flutter 页面

  • 保留 Native 页面栈

  • 路由参数统一管理

🔧 基本使用：

安装：

yaml 复制代码 
flutter_boost:
  git:
    url: 'https://github.com/alibaba/flutter_boost.git'
    ref: 'v4.2.1' # 适配 Flutter 3.x

初始化：

arduino 复制代码 
void main() {
  FlutterBoostApp(
    appBuilder: (home) => MyApp(home),
    routeFactory: (settings, uniqueId) {
      return PageRouteBuilder(
        pageBuilder: (_, __, ___) {
          switch (settings.name) {
            case 'flutterPage':
              return MyFlutterPage(params: settings.arguments);
            default:
              return NotFoundPage();
          }
        },
      );
    },
  );
}

跳转方式（Flutter 中）：

kotlin 复制代码 
FlutterBoost.singleton.open(
  'flutterPage',
  urlParams: {'id': 123, 'title': '详情'},
);

Native 中通过 FlutterBoost 调用 Flutter 页面（iOS/Android 均支持）：

例如 Android 中使用：

sql 复制代码 
FlutterBoost.instance().open("flutterPage", new HashMap<>());

✅ 3. 模拟 iOS

modalTransitionStyle

风格动画（滑上、翻页等）

Flutter 中没有原生的 modalTransitionStyle，但可以自定义实现几种常见风格：

✅ ① 类似 iOS

coverVertical

（滑上）：

less 复制代码 
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (_, __, ___) => ModalPage(),
    transitionsBuilder: (_, anim, __, child) =>
        SlideTransition(position: Tween(begin: Offset(0, 1), end: Offset.zero).animate(anim), child: child),
  ),
);

✅ ② 类似 iOS

flipHorizontal

（翻页）：

less 复制代码 
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (_, __, ___) => YourPage(),
    transitionsBuilder: (_, animation, __, child) {
      final rotate = Tween(begin: pi, end: 0.0).animate(animation);
      return AnimatedBuilder(
        animation: rotate,
        child: child,
        builder: (context, child) {
          return Transform(
            transform: Matrix4.rotationY(rotate.value),
            alignment: Alignment.center,
            child: child,
          );
        },
      );
    },
    transitionDuration: Duration(milliseconds: 600),
  ),
);

✅ 4. 跳转封装类（推荐实践）

你可以封装一个导航工具类，统一管理跳转行为和动画样式：

javascript 复制代码 
class AppNavigator {
  static void push(BuildContext context, Widget page) {
    Navigator.push(context, MaterialPageRoute(builder: (_) => page));
  }

  static void pushFade(BuildContext context, Widget page) {
    Navigator.push(context, createFadeRoute(page));
  }

  static void pushSlideFromBottom(BuildContext context, Widget page) {
    Navigator.push(context, createSlideFromBottom(page));
  }

  static void pushReplace(BuildContext context, Widget page) {
    Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => page));
  }

  static void pushAndRemoveAll(BuildContext context, Widget page) {
    Navigator.pushAndRemoveUntil(
      context,
      MaterialPageRoute(builder: (_) => page),
      (route) => false,
    );
  }
}

使用：

ini 复制代码 
AppNavigator.pushSlideFromBottom(context, DetailPage());

✅ 总结（图示）

功能 方法/工具 用于
入栈 + 动画 PageRouteBuilder 自定义动画
弹窗效果 showDialog / ModalBottomSheet modal 类似
替换页面 pushReplacement 登录后跳主页
清空页面 pushAndRemoveUntil 登录后清栈
混合栈跳转 FlutterBoost Native + Flutter
封装统一跳转 AppNavigator 提升复用性

封装好统一的导航跳转管理工具类，包含以下功能：

  • ✅ 默认 push 跳转

  • ✅ 自定义动画跳转：

    • 淡入淡出 pushFade
    • 底部滑入 pushSlideFromBottom
    • 水平翻页 pushFlipHorizontal（模拟 iOS 翻转动画）

  • ✅ 页面替换跳转 pushReplace

  • ✅ 清空栈跳转 pushAndRemoveAll

你现在只需在项目中使用 AppNavigator.pushFade(context, YourPage()) 等方式，即可统一管理所有跳转逻辑和动画效果。

扩展导航工具类，新增 Flutter Boost 混合跳转支持，关键功能如下：

dart 复制代码 
// 导航工具类：统一管理页面跳转方式与动画（含 Flutter Boost 支持）
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';

class AppNavigator {
  // 标准 push 跳转（Flutter 页面）
  static void push(BuildContext context, Widget page) {
    Navigator.push(context, MaterialPageRoute(builder: (_) => page));
  }

  // 淡入淡出动画跳转
  static void pushFade(BuildContext context, Widget page) {
    Navigator.push(context, _createFadeRoute(page));
  }

  // 底部滑入动画跳转
  static void pushSlideFromBottom(BuildContext context, Widget page) {
    Navigator.push(context, _createSlideFromBottom(page));
  }

  // 水平翻页动画跳转（类似 iOS 翻转）
  static void pushFlipHorizontal(BuildContext context, Widget page) {
    Navigator.push(context, _createFlipRoute(page));
  }

  // 替换当前页面跳转
  static void pushReplace(BuildContext context, Widget page) {
    Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => page));
  }

  // 跳转并清除栈中所有页面
  static void pushAndRemoveAll(BuildContext context, Widget page) {
    Navigator.pushAndRemoveUntil(
      context,
      MaterialPageRoute(builder: (_) => page),
      (route) => false,
    );
  }

  // --- 自定义动画 --- //
  static Route _createFadeRoute(Widget page) {
    return PageRouteBuilder(
      pageBuilder: (_, __, ___) => page,
      transitionsBuilder: (_, anim, __, child) =>
          FadeTransition(opacity: anim, child: child),
      transitionDuration: Duration(milliseconds: 400),
    );
  }

  static Route _createSlideFromBottom(Widget page) {
    return PageRouteBuilder(
      pageBuilder: (_, __, ___) => page,
      transitionsBuilder: (_, anim, __, child) => SlideTransition(
        position: Tween(begin: Offset(0, 1), end: Offset.zero).animate(anim),
        child: child,
      ),
      transitionDuration: Duration(milliseconds: 400),
    );
  }

  static Route _createFlipRoute(Widget page) {
    return PageRouteBuilder(
      pageBuilder: (_, __, ___) => page,
      transitionsBuilder: (_, animation, __, child) {
        final rotate = Tween(begin: pi, end: 0.0).animate(animation);
        return AnimatedBuilder(
          animation: rotate,
          child: child,
          builder: (context, child) {
            return Transform(
              transform: Matrix4.rotationY(rotate.value),
              alignment: Alignment.center,
              child: child,
            );
          },
        );
      },
      transitionDuration: Duration(milliseconds: 600),
    );
  }

  // --- Flutter Boost 混合导航 --- //
  // 用于跳转 Native 或 Flutter Boost 注册的页面
  static void boostNavigateTo(String pageName, {Map<String, dynamic>? arguments}) {
    BoostNavigator.instance.push(pageName, arguments: arguments ?? {});
  }

  // 替换当前页为 Boost 页面
  static void boostReplaceTo(String pageName, {Map<String, dynamic>? arguments}) {
    BoostNavigator.instance.push(pageName, arguments: arguments ?? {}, withContainer: true);
  }

  // 关闭当前 Boost 页面
  static void boostPop<T extends Object?>([T? result]) {
    BoostNavigator.instance.pop(result);
  }
}

已为你扩展导航工具类，新增 Flutter Boost 混合跳转支持，关键功能如下：

✅ Flutter Boost 支持的方法：

  • boostNavigateTo(String pageName, {Map<String, dynamic>? arguments})

    跳转到 Boost 注册的 Flutter 或 Native 页面。

  • boostReplaceTo(String pageName, {Map<String, dynamic>? arguments})

    替换当前页面为目标 Boost 页面。

  • boostPop([T? result])

    返回当前 Boost 页面（带返回值可选）。

🔧 示例使用：

php 复制代码 
AppNavigator.boostNavigateTo('nativePage', arguments: {'id': 123});
AppNavigator.boostPop(); // 关闭当前页面
相关推荐
编程猪猪侠24 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞28 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门（九）Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案，优雅实现记住表单历史搜索记录！
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计：从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件，集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02扣子开源本地部署教程 丨Coze智能体小白喂饭级指南03Coze 开源了，送上保姆级私有化部署方案【建议收藏】04全球最强模型Grok4，国内已可免费使用！（附教程）05vue数据变化但页面不变06KGG转MP3工具|非KGM文件|解密音频07干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！0801-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验09腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）10【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致