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

在 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）

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailPage()),
);

---

2.替换当前页面（pushReplacement）

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => LoginPage()),
);

---

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

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

---

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

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

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

---

5.弹窗跳转（Modal）

Alert 弹窗

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("确认")),
    ],
  ),
);

底部弹窗

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

---

6.命名路由跳转（pushNamed）

main.dart:

routes: {
  '/': (context) => HomePage(),
  '/detail': (context) => DetailPage(),
},

使用跳转：

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

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

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

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),
  );
}

使用：

Navigator.push(context, createSlideFromBottom(MyPage()));

---

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

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

• Native App 中嵌入 Flutter 页面

• 保留 Native 页面栈

• 路由参数统一管理

🔧 基本使用：

安装：

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

初始化：

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 中）：

FlutterBoost.singleton.open(
  'flutterPage',
  urlParams: {'id': 123, 'title': '详情'},
);

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

例如 Android 中使用：

FlutterBoost.instance().open("flutterPage", new HashMap<>());

---

✅ 3. 模拟 iOS

modalTransitionStyle

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

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

✅ ① 类似 iOS

coverVertical

（滑上）：

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

（翻页）：

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. 跳转封装类（推荐实践）

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

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,
    );
  }
}

使用：

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 混合跳转支持，关键功能如下：

---

// 导航工具类：统一管理页面跳转方式与动画（含 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 页面（带返回值可选）。

---

🔧 示例使用：

AppNavigator.boostNavigateTo('nativePage', arguments: {'id': 123});
AppNavigator.boostPop(); // 关闭当前页面

---