Flutter 零基础入门（三十四）：页面跳转 Navigator —— 从一个页面到另一个页面

LarryLan

发布于 2026-02-04 14:10:11

1780

页面跳转 Navigator —— 从一个页面到另一个页面

到目前为止，你已经可以：

写展示页面
写列表、网格、卡片
输入文字并校验

但是一个真正的 App 必须有 多页面切换：

首页 → 详情页
登录 → 主页面
商品列表 → 商品详情

在 Flutter 中，页面跳转就是 Navigator 的工作。

一、什么是 Navigator？

一句话理解：

Navigator = 页面栈管理器

就像浏览器的历史记录：

push → 压入新页面
pop → 返回上一个页面

📌 Flutter 的每个页面都是 Widget（通常是 Scaffold）。

二、最简单的页面跳转

假设我们有两个页面：

class FirstPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第一页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('跳转到第二页'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第二页')),
      body: Center(
        child: Text('这是第二页'),
      ),
    );
  }
}

📌 点击按钮后，第二页会 覆盖在第一页上。

三、返回上一页（pop）

在第二页，我们可以这样返回：

ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: Text('返回上一页'),
)

📌 pop 的本质：

将当前页面从页面栈移除，显示上一页

四、传递参数到新页面

很多场景需要把数据传给下一页：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(title: 'Hello Flutter'),
  ),
);

在第二页接收：

class SecondPage extends StatelessWidget {
  final String title;
  SecondPage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
    );
  }
}

📌 注意：用 构造函数 传参数是最常用的方式。

五、从下一页返回数据

Flutter 支持返回数据给上一页：

// 第一页
final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);
print('返回结果：$result');
// 第二页
ElevatedButton(
  onPressed: () {
    Navigator.pop(context, '我是返回值');
  },
  child: Text('返回并传值'),
)

📌 这就是 异步返回机制。

六、命名路由（可选进阶）

当页面很多时，推荐使用命名路由：

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => FirstPage(),
      '/second': (context) => SecondPage(),
    },
  ));
}

跳转：

Navigator.pushNamed(context, '/second');

📌 命名路由适合中大型项目。

七、新手常见坑

❌ Navigator.push 没传 context ❌ pop 传 null 导致异步错误 ❌ 页面参数忘记加 required ❌ 重复创建 MaterialPageRoute

八、本篇你真正掌握了什么？

你已经学会：

push / pop 基础用法
构造函数传递参数
pop 返回数据
命名路由的基础使用

📌 到这里为止：

你已经可以开发“多页面 App”了 🚀

九、一句话总结

Navigator 管页面栈 push 进栈 → 新页面 pop 出栈 → 返回

🔜 下一篇预告

《Flutter 零基础入门（三十五）：异步基础 Future / async / await —— 网络请求与延时操作》

下一篇我们将学习：

Future 的使用
async / await
延迟操作与模拟网络请求

🚀 真正开始“业务数据交互”

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2026-01-26，如有侵权请联系 cloudcommunity@tencent.com 删除

基础

本文分享自 Larry的Hub 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度