Flutter Navigator to new page

在 Flutter 中，Navigator 是用来管理应用中不同页面和路由的类。在本文中，我们将学习如何使用 Navigator 在 Flutter 中导航到另一个页面。

创建新页面

在导航到一个新页面之前，我们需要先创建一个新页面。创建一个新页面非常简单，只需要创建一个新的 StatelessWidget 或 StatefulWidget 并返回一个 Scaffold 即可。

import 'package:flutter/material.dart';

class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('New Page'),
      ),
      body: Center(
        child: Text('This is a new page!'),
      ),
    );
  }
}

导航到新页面

使用 Navigator 导航到新页面的最简单方式是使用 Navigator.push() 方法。该方法接受一个 BuildContext 和一个 MaterialPageRoute，并在 Navigator 的堆栈上推入我们的新页面。我们可以在 MaterialApp 中使用 Navigator.push()，也可以在任意一个其他的 BuildContext 中使用。

以下是导航到新页面的示例代码：

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

返回到上一页

在新页面中，我们可以通过使用 Navigator.pop() 方法返回到上一页。该方法会将新页面从 Navigator 的堆栈中移除，同时返回到之前的页面。

以下是返回到上一页的示例代码：

Navigator.pop(context);

整体代码

以下是包含创建新页面和导航到新页面的整体示例代码：

import 'package:flutter/material.dart';

class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('New Page'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigator Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Home Page'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Go to new page'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => NewPage()),
              );
            },
          ),
        ),
      ),
    );
  }
}