Flutter 原生路由及其应用

2023-09-28 05:22:14

前言

Flutter 中的路由跳转有两种方法：一种是用系统原生的跳转方法，即“Native Routing”。另一种则是，用第三方框架来实现路由，例如：我们熟知的Flutter框架，包括：fluro、page_route、easy_router等。本文主要介绍系统原生的跳转方法，即“Native Routing”。

按官方文档原话，我们通常会用“屏”来表示应用的不同页面（界面）。比如，某个应用有一“屏”展示商品列表，当用户点击某个商品的图片，会跳到新的一“屏”展示商品的详细信息。在 Android 中，我们可以通过 Intent 来实现不同屏幕之间的跳转；而在 iOS 中，我们可以通过 pushViewController 来实现。

在 Flutter 中，路由同样也是一种机制，用于在应用程序的不同屏幕之间进行导航。

原生路由的工作原理

Flutter 的路由系统是一个基于堆栈的系统，其中每个路由都表示为堆栈上的一个元素。当用户导航到新屏幕时，该屏幕的路由会被推送到堆栈中。当用户返回到前一个屏幕时，当前屏幕的路由会被从堆栈中弹出。

Flutter 提供了一个名为 Navigator 的类来管理路由堆栈。该类提供了许多方法来推入和弹出路由，以及获取当前的路由。

如何使用原生路由

要在 Flutter 中使用原生路由，您需要首先创建一个 Navigator 对象。然后，您可以使用 Navigator 的 push() 方法将新的路由推入堆栈。当您想返回到前一个屏幕时，可以使用 Navigator 的 pop() 方法将当前的路由从堆栈中弹出。

以下是使用原生路由的一个示例：

// 创建一个新的路由
var route = MaterialPageRoute(
  builder: (context) => MyNewScreen(),
);

// 将新的路由推入堆栈
Navigator.push(context, route);

// 返回到前一个屏幕
Navigator.pop(context);