Flutter 导航和路由

导航和路由是所有移动应用程序的一些核心概念，它允许用户在不同的页面之间移动。我们知道每个移动应用程序都包含多个屏幕，用于显示不同类型的信息。例如，一个应用程序可以有一个屏幕，其中包含各种产品。当用户点击该产品时，它会立即显示有关该产品的详细信息。

在 Flutter 中，屏幕和页面被称为路由，而这些路由只是一个小部件。在 Android 中，路由类似于一个活动，而在 iOS 中，它相当于一个ViewController。

在任何移动应用程序中，导航到不同的页面定义了应用程序的工作流程，而处理导航的方式被称为路由。Flutter 提供了一个基本的路由类 MaterialPageRoute 和两种方法 Navigator.push() 和 Navigator.pop()，它们展示了如何在两个路由之间导航。在您的应用程序中开始导航需要以下步骤。

步骤 1：首先，您需要创建两个路由。

步骤 2：然后，使用 Navigator.push() 方法从一个路由导航到另一个路由。

步骤 3：最后，使用 Navigator.pop() 方法导航回第一个路由。

让我们以一个简单的例子来理解两个路由之间的导航

创建两个路由

在这里，我们将创建两个用于导航的路由。在两个路由中，我们只创建了一个单个按钮。 当我们点击第一个页面上的按钮时，它将导航到第二个页面。再次，当我们点击第二个页面上的按钮时，它将返回到第一个页面。下面的代码片段在 Flutter 应用程序中创建了两个路由。

使用 Navigator.push() 方法导航到第二个路由

Navigator.push() 方法用于导航/切换到新的路由/页面/屏幕。在这里，push() 方法在堆栈上添加一个页面/路由，然后使用 Navigator 来管理它。我们再次使用 MaterialPageRoute 类，该类允许使用特定于平台的动画在路由之间进行过渡。下面的代码解释了 Navigator.push() 方法的用法。

使用 Navigator.pop() 方法返回到第一个路由

现在，我们需要使用 Navigator.pop() 方法来关闭第二个路由并返回到第一个路由。pop() 方法允许我们从堆栈中删除当前路由，该堆栈由 Navigator 管理。

现在，让我们看看完整的代码，以实现两个路由之间的导航。首先，创建一个 Flutter 项目并将以下代码插入到 main.dart 文件中。

输出

当您在 Android Studio 中运行该项目时，您将在模拟器中获得以下屏幕。这是第一个屏幕，它只包含一个按钮。

点击按钮点击这里，您将导航到第二个屏幕，如下图所示。接下来，当您单击按钮返回，您将返回到第一个页面。

使用命名路由进行导航

我们已经学习了如何通过创建新路由并使用 Navigator 管理它来导航到新屏幕。Navigator 维护基于堆栈的路由历史记录。如果需要在应用程序的许多部分导航到同一屏幕，则此方法没有益处，因为它会导致代码重复。 通过定义命名路由并可以使用 命名路由进行导航，可以解决此问题。

我们可以通过使用 Navigator.pushNamed() 函数来使用命名路由。此函数接受两个必需的参数（构建上下文和字符串）和一个可选参数。此外，我们了解了 MaterialPageRoute，它负责页面过渡。如果我们不使用它，那么更改页面将很困难。

以下是使用命名路由所必需的步骤。

步骤 1：首先，我们需要创建两个屏幕。以下代码在我们的应用程序中创建了两个屏幕。

步骤 2：定义路由。

在此步骤中，我们必须定义路由。MaterialApp 构造函数负责定义初始路由和其他路由本身。这里的初始路由告诉页面的开始，而路由属性定义了可用的命名路由和小部件。下面的代码更清楚地解释了这一点。

步骤 3：使用 Navigator.pushNamed() 函数导航到第二个屏幕。

在此步骤中，我们需要调用 Navigator.pushNamed() 方法进行导航。为此，我们需要在 HomeScreen 的 build 方法中更新一个 onPressed() 回调，如下面的代码片段所示。

步骤 4：使用 Navigator.pop() 函数返回到第一个屏幕。

这是最后一步，我们将使用 Navigator.pop() 方法返回到第一个屏幕。

让我们看看上述解释在 Flutter 项目中的完整代码，并在模拟器中运行它以获取输出。

输出

点击按钮点击这里，您将导航到第二个屏幕，如下图所示。接下来，当您单击按钮返回，它将返回到主页。