Flutter系列（六）中如何跳转界面

最新推荐文章于 2025-09-25 13:44:21 发布

原创

最新推荐文章于 2025-09-25 13:44:21 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

本篇Flutter教程详细讲解了如何进行页面跳转，包括直接跳转和路由跳转两种方式，并介绍了使用Fluro库实现页面传值的方法。同时，文章也提及了在Android和iOS中页面跳转的不同做法，以及Navigator.pop()用于关闭页面的操作。

您好，欢迎关注我的专栏，本篇文章是关于 Flutter 的系列文，从简单的 Flutter 介绍开始，一步步带你了解进入 Flutter 的世界。你最好有一定的移动开发经验，如果没有也不要担心，在我的专栏底部给我留言，我会尽我的能力给你解答。

上一篇专栏，我带大家用Flutter实现了一个完整的可自定义配置的 PageView 指示器。这篇专栏，我会教大家在Flutter中如何实现界面跳转

在Android中，我们会使用Intent来进行界面间的跳转，用startActivityForResult来处理界面跳转完成后的回调；在iOS中，我们使用Pages进行页面跳转。

页面跳转

在Flutter中页面跳转方式有两种：

方法一：
直接跳转

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

方法二：
通过路由跳转

void main() {
  runApp(MaterialApp(
    home: MyAppHome(), // becomes the route named '/'
    routes: <String, WidgetBuilder> {
      '/a': (BuildContext context) => MyPage(title: 'page A'),
      '/b': (BuildContext context) => MyPage(title: 'page B'),
      '/c': (BuildContext context) => MyPage(title: 'page C'),
    },
  ));
}

Navigator.of(context).pushNamed('/b');

根据Flutter的文档，route