第9天：3种页面跳转方式的区别，用错会踩大坑！

文章目录

• • 🎯 先看核心结论（小白版）
  • 📚 逐个拆解（代码+效果+场景）
  • • 1. 最基础的跳转：Navigator.push + MaterialPageRoute
    • • 代码示例
      • 核心特点（小白能懂）
      • 直观效果
    • 2. 更优雅的跳转：Navigator.pushNamed（命名路由）
    • • 第一步：先配置“路由表”（关键！）
      • 第二步：用名字跳转
      • 核心特点（小白能懂）
      • 直观效果
    • 3. 特殊场景跳转：pushReplacementNamed（替换式跳转）
    • • 代码示例
      • 核心特点（小白能懂）
      • 直观效果
  • 🚨 新手最容易踩的坑
  • • 坑1：用pushReplacementNamed做普通跳转
    • 坑2：忘记配置路由表就用pushNamed
    • 坑3：登录后用push而不是pushReplacementNamed
  • 🛠 实战案例（完整代码）
  • ### 总结

j今天把三种页面跳转的方式进行简单的梳理：

• Navigator.of(context).pushReplacementNamed('/register')、
• Navigator.push(MaterialPageRoute(…))、
• Navigator.pushNamed(context, '/login')

这三种写法到底有啥不一样？今天用大白话+实战案例，让你5分钟彻底搞懂，再也不用瞎复制代码了！

🎯 先看核心结论（小白版）

📚 逐个拆解（代码+效果+场景）

1. 最基础的跳转：Navigator.push + MaterialPageRoute

这是Flutter最基础的页面跳转方式，直接“指定要跳的页面”，新手最开始接触的就是它。

代码示例

// 点击按钮跳转到注册页
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RegisterPage(), // 直接指定目标页面
),
);
},
child: const Text('跳转到注册页'),
)

核心特点（小白能懂）

• ✅ 保留原页面：比如从“首页”跳转到“注册页”，点击手机的「返回键」或页面上的返回按钮，能回到首页；
• ❌ 硬编码：跳转时直接写RegisterPage()，如果项目里有10个地方要跳注册页，后期改页面名称要改10次；
• 📌 适用场景：小型项目、临时的页面跳转（比如测试阶段）。

直观效果

首页 → 注册页（返回键→首页）

2. 更优雅的跳转：Navigator.pushNamed（命名路由）

把页面“起个名字”（比如/login、/register），跳转时直接喊“名字”就行，不用写具体页面，是Flutter官方推荐的写法！

第一步：先配置“路由表”（关键！）

在项目入口main.dart里，给页面注册“名字”，相当于给每个页面办个“身份证”：

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: '路由跳转示例',
// 配置路由表：页面名字 ↔ 具体页面
routes: {
'/home': (context) => const HomePage(), // 首页
'/login': (context) => const LoginPage(), // 登录页
'/register': (context) => const RegisterPage(), // 注册页
},
initialRoute: '/home', // 默认打开首页
);
}
}

第二步：用名字跳转

// 点击按钮跳转到登录页
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/login'); // 直接用“名字”跳转
},
child: const Text('跳转到登录页'),
)

核心特点（小白能懂）

• ✅ 保留原页面：和push一样，返回键能回到上一页；
• ✅ 易维护：后期要修改LoginPage的参数/名称，只需要改路由表，不用改所有跳转的地方；
• ✅ 传参方便：可以给命名路由传参数（比如跳转到“用户详情页”传userId）；
• 📌 适用场景：中大型项目、需要统一管理页面跳转的场景（90%的项目都该用这个）。

直观效果

首页 → 登录页（返回键→首页）

3. 特殊场景跳转：pushReplacementNamed（替换式跳转）

“替换”意味着：跳转到新页面后，销毁原来的页面，返回键再也回不去了！

代码示例

// 注册成功后跳转到首页（不想让用户返回注册页）
ElevatedButton(
onPressed: () {
Navigator.of(context).pushReplacementNamed('/home');
},
child: const Text('注册成功，进入首页'),
)

核心特点（小白能懂）

• ❌ 销毁原页面：比如从“注册页”→“首页”，原注册页被销毁，点击返回键直接退出App（而不是回到注册页）；
• ✅ 命名路由方式：和pushNamed一样，需要先配置路由表；
• 📌 适用场景：
  • 登录/注册成功后跳转到首页；
  • 支付完成后跳转到结果页；
  • 启动页（闪屏）跳转到首页（不想让用户返回启动页）。

直观效果

注册页 → 首页（返回键→退出App，回不到注册页）

🚨 新手最容易踩的坑

坑1：用pushReplacementNamed做普通跳转

比如首页→详情页用了pushReplacementNamed，用户看完详情页想返回首页，结果直接退出App了！

坑2：忘记配置路由表就用pushNamed

直接写Navigator.pushNamed(context, '/login')，但没在MaterialApp里配置/login，会直接报错“找不到路由”！

坑3：登录后用push而不是pushReplacementNamed

用户登录成功后跳转到首页，结果点击返回键又回到登录页，体验超差！

🛠 实战案例（完整代码）

给大家一个可直接运行的示例，包含3种跳转方式：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: '路由跳转演示',
routes: {
'/home': (context) => const HomePage(),
'/login': (context) => const LoginPage(),
'/register': (context) => const RegisterPage(),
},
initialRoute: '/home',
);
}
}

// 首页
class HomePage extends StatelessWidget {
const HomePage({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('首页')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 方式1：push + MaterialPageRoute
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const RegisterPage(),
),
);
},
child: const Text('方式1：跳转到注册页（可返回）'),
),
const SizedBox(height: 20),
// 方式2：pushNamed
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/login');
},
child: const Text('方式2：跳转到登录页（可返回）'),
),
],
),
),
);
}
}

// 登录页
class LoginPage extends StatelessWidget {
const LoginPage({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('登录页')),
body: Center(
child: ElevatedButton(
onPressed: () {
// 方式3：pushReplacementNamed（登录后替换，不能返回）
Navigator.of(context).pushReplacementNamed('/home');
},
child: const Text('登录成功，返回首页（不可返回登录页）'),
),
),
);
}
}

// 注册页
class RegisterPage extends StatelessWidget {
const RegisterPage({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('注册页')),
body: Center(
child: ElevatedButton(
onPressed: () {
// 方式3：pushReplacementNamed（注册后替换，不能返回）
Navigator.of(context).pushReplacementNamed('/home');
},
child: const Text('注册成功，返回首页（不可返回注册页）'),
),
),
);
}
}

### 总结

！如果有不清楚的地方，评论区留言，我会一一解答～