Flutter 从当前页面进入一个新的页面并返回_flutter 打开同一个页面返回-优快云博客

本文链接：https://blog.youkuaiyun.com/xusj_deathcloud/article/details/82711983

本文介绍在Flutter中如何使用Navigator进行页面导航。通过实例演示了如何从一个页面跳转到另一个页面，并提供了完整的代码示例。文章详细解释了如何创建两个页面，以及如何在点击按钮时触发页面间的跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在原来的Android开发中，页面之间的导航是通过Active或者Fragmentt来实现的。而在Flutter中，秉承着一切都是widget的理念，页面当然也可以看成是一个widget，而页面切换是通过路由Navigator实现的，通过Navigator路由管理器进行推入路由和退出路由实现页面切换。

项目说明：首页中间有个按钮，点击后进入一个新的页面，新页面同样有个按钮点击后返回。

下面撸码：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'Navigator Demon',
      home: new MyHomePage(
        title: '第一个页面',
      ),
    );
  }
}

/*
这是首页面，包含一个IOS风格的按钮，点击该按钮可以导航到第二个页面
 */
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);
  final title;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
          //这是一个IOS风格材质的按钮，需要导入cupertino文件才能引用
          child: new CupertinoButton(
              color: Colors.blue,
              child: new Text('进入第二个页面'),
              onPressed: () {
                Navigator.push(
                    context,
                    new MaterialPageRoute(
                        builder: (context) => new SecondePage(
                              title: '第二个页面',
                            )));
              })),
    );
  }
}

/*
这是第二个页面，包含一个返回的按钮
 */
class SecondePage extends StatelessWidget {
  const SecondePage({Key key, this.title}) : super(key: key);
  final title;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
        //这是一个IOS风格材质的按钮，需要导入cupertino文件才能引用
        child: new CupertinoButton(
            color: Colors.blue,
            child: new Text('返回第一个页面'),
            onPressed: () {
              Navigator.pop(context);
            }),
      ),
    );
  }
}

效果如下：

点击按钮进入下一个页面，点击返回回到第一个页面。