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

转载 于 2025-06-04 11:56:21 发布 · 224 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.cn/post/7511630166221881354
文章标签：

#flutter

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

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

二、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 的高级页面跳转

  • ✅ 自定义转场动画

  • ✅ 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());

总结（图示）

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

  • ✅ 默认 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(); // 关闭当前页面

CbukeJ
关注
Flutter 页面间数据传递(共享)的几种常用方式
weixin_30516243的博客
08-08 2361
前言 在Android中，我们常遇到的场景就是在页面跳转(Frament,Activity)时候，要将当前的部分数据携带到另外一个页面中，供另外页面使用。这时候我们常用的就是使用Intent， Bundle等携带数据。 那么在Flutter的开发过程中，页面之间的数据传递也是必不可少的，又是怎么把一个页面的数据传递(共享)给另外一个页面，或者关闭当前页面并把当前页面的数据带给前一...
Flutter开发(七)：Flutter页面跳转
热门推荐
wuqingsen1的博客
10-29 1万+
注释：下面代码理解就可以，不用跟着写。 1.Flutter 中 Intent 跳转 Flutter 中没有 Intent，可以通过 Native 整合来触发 Intents。 当需要调用相机、文件管理器等，需要第三方插件。 别人总结的插件库：插件库 2.Flutter 实现不同页面的跳转 切换屏幕与，可以访问路由来绘制新的 widget，管理多个屏幕有两个核心概念和类：Route 和 Navigator。Route 是应用程序页面(activity)的抽象，Navigator 是管理
Flutter 页面跳转
马志武的博客
06-13 7314
目录 一、基本路由（静态路由） 1、不传值跳转 2、传值跳转 二、命名路由（动态路由） 1、不传值跳转 2、传值跳转 效果图 完整代码 在Flutter中页面跳转被称之为‘路由’。 是通过Navigator 组件管理路由导航，其提供了管理堆栈的方法：Navigator.push（跳转） 和 Navigator.pop（返回）。 Flutter配置路由的方式有两种：1、基本路...
flutter 的页面跳转总结
yyyyyyui68的博客
09-21 1026
在flutter 中使用 push就是在路由堆栈中添加一个页面到顶部，就是我们经常说的打开一个页面，然后pop就是关闭堆栈顶部的页面，然后回到上一个页面。这个是比较简单的一个用法不做多说，可以提一嘴的是push跳转同一界面，跳转一次就会添加一个这样的页面到堆栈中。popAndPushNamed的作用其实是一样的，是结束当前页面并跳转到目标界面。如果不想结束掉所有的，比如我从1-->2-->3-->4.然后在界面4我想要跳转界面5并且结束掉3和4，并保留之前的1和2，这个时候可以使用。
flutter 页面间的跳转
weixin_42373488的博客
07-06 2562
RaisedButton按钮组件 它有两个最基本的属性：child：可以放入容器，图标，文字。可构建多彩的按钮。onPressed：点击事件的相应，一般会调用Navigator组件。 跳转到下一个页面，接收两个参数，一个是上下文context，一个是要跳转的函数。 三、返回到某一页 Navigator.pop 返回到上一个页面，使用时传递一个context（上下文）参数。使用时要注意的是：你必须是有上级页面的，也就是说上级页面使用了Navigator.push。...
Flutter 页面跳转.zip
10-05
在Flutter中页面跳转被称之为‘路由’。 是通过Navigator 组件管理路由导航，其提供了管理堆栈的方法：Navigator.push（跳转） 和 Navigator.pop（返回）。 Flutter配置路由的方式有两种：1、基本路由（静态路由） 2、命名路由（动态路由）。
Flutter 三种方式实现页面切换后保持原页面状态
weixin_44941011的博客
05-09 1892
前言： 在Flutter应用中，导航栏切换页面后默认情况下会丢失原页面状态，即每次进入页面时都会重新初始化状态，如果在initState中打印日志，会发现每次进入时都会输出，显然这样增加了额外的开销，并且带来了不好的用户体验。 在正文之前，先看一些常见的App导航，以喜马拉雅FM为例: 它拥有一个固定的底部导航以及首页的顶部导航，可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面，之前...
Flutter路由管理艺术：页面跳转的优雅实现
路由管理不仅仅是简单的页面跳转，它还涉及到用户体验、应用性能和维护成本等多个方面。一个良好设计的路由系统可以使得应用结构清晰、模块化，并且易于扩展和维护。此外，良好的路由管理可以确保应用在复杂场景下的...
flutter如何消除页面跳转后缓存的页面
最新发布
04-03
### 清除 Flutter 页面跳转后的缓存方法 在 Flutter 中，当导航到新页面时，默认情况下会保留上一个页面的状态。如果希望清除这些状态或者释放内存中的旧页面实例，则可以通过多种方式实现。 #### 使用 `Navigator...
flutter实现单点跳转浏览器搜索页面
03-23
Android Flutter实现单点跳转浏览器百度搜索页面
Flutter中文教程1.Flutter简介
2302_77692709的博客
04-20 511
Flutter是谷歌的UI框架,用于开发Android和iOS的高质量原生界面。它允许您使用单一代码库在两个平台上构建漂亮的原生应用程序。
Flutter - 两个页面跳转
路漫漫其修远
10-12 229
import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( title: 'Navigation Basics', home: new FirstScreen(), )); } class FirstScreen extends StatelessWidget { @ov...
[Flutter]页面跳转和传值
Gamin
03-31 4729
命名路由是一种用于管理页面导航的技术，它允许你为每个页面分配一个唯一的名称，并通过这些名称在应用程序中进行页面之间的导航。命名路由，由一对字符串（路由名称）和对应的屏幕（或称为页面/视图）组成。命名路由的好处提高代码可维护性命名路由使得路由和它们对应的屏幕解耦，这让查找和修改特定路由相关的代码变得更加容易。简化路由管理当应用的结构变得更为复杂时，使用命名路由可以帮助集中管理路由，而不是在代码中散布大量的和。配置命名路由我们可以在的routes属性中定义所有的命名路由。routes。
Flutter基础（一）页面跳转
写好每一篇文章
03-29 1万+
Flutter基础，路由跳转，页面跳转用法
flutter 页面跳转
GuanZhong12345的博客
07-02 278
import 'package:flutter/material.dart'; import 'package:kdbflutter/common/IGenericDataProvider.dart'; //页面跳转 class RouteUtil { //跳转页面 static push(BuildContext context, Widget widget) { Navigator.push( context, MaterialPageRoute( .
Flutter界面跳转
weixin_39146894的博客
04-14 290
Flutter界面跳转 定义界面，有点像Android清单文件中申明界面。 可以新建个dart文件，声明 const first = 'first'; const two = 'two'; const three = 'three'; var RoutPath ={ "$first":(context)=> FirstScreen("AAAAA"), "$two":(co...
Flutter 页面跳转和传值的实现
chinaherolts2008的博客
07-21 446
每当你跳转到一个新页面时，Navigator 会将新页面的 Route 压栈（push），当你返回到之前的页面时，它会将当前页面的 Route 出栈（pop）。在 Android 上，它通常是一个从屏幕底部向上滑入的动画，而在 iOS 上，它通常是一个从屏幕右侧滑入的动画。命名路由是一种用于管理页面导航的技术，它允许你为每个页面分配一个唯一的名称，并通过这些名称在应用程序中进行页面之间的导航。routes 是一个 Map，它的键是字符串（路由的名称），而值是对应的构造器函数，返回相应的页面 Widget。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值