Flutter作为一款流行的跨平台移动应用开发框架，提供了强大而灵活的路由管理机制。在Flutter中，路由用于管理页面之间的跳转和导航。GetX是一个强大的Flutter状态管理库，不仅提供了状态管理功能，还提供了便捷的路由管理功能。

Flutter中的基本路由概念

在Flutter中，路由可以理解为页面的抽象，是应用程序的导航单元。Flutter中有两种基本的路由类型：

  • 命名路由（Named Routes）：通过在应用程序中注册每个路由的名称，然后使用这些名称进行导航。

  • 匿名路由（Anonymous Routes）：直接使用Navigator类进行页面的推入（push）和弹出（pop）。

在实际开发中，通常使用命名路由来更好地组织和管理页面。

GetX库中的路由管理

1. 基本的命名路由跳转

在使用GetX时，我们首先在main.dart文件中使用GetMaterialApp，并在getPages参数中注册应用程序中的所有页面·····：

void main() {
  runApp(GetMaterialApp(
    initialRoute: '/home',
    getPages: [
      GetPage(name: '/home', page: () => HomeScreen()),
      GetPage(name: '/details', page: () => DetailsScreen()),
    ],
  ));
}

然后，可以在应用程序的任何地方使用路由名称进行跳转：

Get.toNamed('/details');

2. 命名路由跳转并传递参数 Get.toNamed

在跳转时，通过arguments参数传递数据到目标页面：

Get.toNamed('/details', arguments: {'param1': 'value1', 'param2': 'value2'});

在目标页面中，通过Get.arguments获取传递的参数：

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var arguments = Get.arguments;
    return Text('Param1: ${arguments['param1']}, Param2: ${arguments['param2']}');
  }
}

3. 传递回调函数 Get.toNamed

GetX允许在路由之间传递回调函数，用于在目标页面完成后执行特定逻辑：

Get.toNamed('/details', onPopPage: (returnedValue) {
  print('Returned value: $returnedValue');
});

在目标页面中使用Get.back(result: returnValue)返回值：

Get.back(result: 'Data from DetailsScreen');

4. 弹出所有页面并跳转 Get.offAllNamed

使用Get.offAllNamed()方法可以弹出所有页面并跳转到指定页面：

Get.offAllNamed('/home');

5. 替换当前页面 Get.offNamed

使用Get.offNamed()可以替换当前页面而不保留当前页面在导航栈中：

Get.offNamed('/details');

效果同 Get.off()

6.关闭当前所有页面并跳转到指定命名路由 Get.offAndToNamed

示例

Get.offAndToNamed('/details', arguments: {'data': 'some_data'});

作用是关闭当前所有页面并立即跳转到指定名称的路由。这意味着它会清除整个页面堆栈，包括当前页面及其前面的所有页面，然后直接导航到新的命名路由,对于需要在应用程序中进行页面重置或直接导航到指定页面的情况非常有用。

7. 返回上一页并传递数据 Get.back

使用Get.back(result: returnValue)返回上一页并传递数据：

Get.back(result: 'Data from DetailsScreen');

在上一页中通过result接收返回的数据：

var result = await Get.toNamed('/details');
print('Returned data: $result');

8.基本的 Get.to 跳转

Get.to 方法用于推入新的页面，它的基本用法如下：

Get.to(YourPage());

将 YourPage 推入导航栈，显示在当前页面之上。

9. Get.to 传递参数

通过 arguments 参数，可以在页面之间传递数据：

Get.to(YourPage(), arguments: {'param1': 'value1', 'param2': 'value2'});

参数获取同上

10 Get.to 路由回调

Get.to(YourPage(), onClose: (returnedValue) {
  print('Returned value: $returnedValue');
});

通过 Get.back(result: returnValue) 返回值：

Get.back(result: 'Data from YourPage');

11.替换当前页面 Get.off Get.offAll

替换当前页面而不保留其在导航栈中,Get.off 和 Get.offAll 方法可以用于此目的：

Get.off(YourPage());
// 或者替换所有页面
Get.offAll(YourPage());

Get.offAll 同 Get.offAllNamed 用于关闭当前所有的页面，并导航到指定名称的路由。

12.弹出页面 Get.back

如果你只想弹出当前页面而不跳转到新页面，可以使用 Get.back()：

Get.back();

13.弹出到指定路由 Get.until

如果要从当前页面一直弹出，直到指定的路由为止，可以使用 Get.until()：

Get.until((route) => route.settings.name == '/home');

这是一个在路由栈中搜索直到找到指定路由并弹出的方法。

14.Get.offUntil()

语法

Get.offUntil(Widget newRoute, RoutePredicate predicate, {String? id, arguments});

参数说明： newRoute：要导航到的新页面的 widget。

predicate：一个回调函数，它接受当前路由并返回一个布尔值。导航将一直进行，直到找到第一个满足此条件的路由。

id（可选）：路由标识符，用于标识路由，以便稍后关闭或查找它。

arguments（可选）：可选参数，用于向目标页面传递数据。

示例

Get.offUntil(
  DetailsScreen(),
  ModalRoute.withName('/home'),
);

在上面的示例中，将导航到 DetailsScreen，并一直关闭页面，直到找到具有名称 /home 的路由。

既然有了第一个参数，那么第二个参数的意义是什么呢？

  • 停止条件： predicate 是一个回调函数，它接受当前路由并返回一个布尔值。导航将一直进行，直到找到第一个满足 predicate 条件的路由。当 predicate 返回 true 时，导航停止，不再关闭页面，达到了条件终止的效果。
  • 动态条件： 这个条件允许你在运行时根据当前的导航状态来确定何时停止导航。这在一些动态的场景中非常有用，例如导航到某个特定页面之前需要检查某些状态。

各位看官自行理解。

总结

Getx 路由导航方法看似很多，其实有的只是功能相同，名称不同罢了，比如Get.to 和 Get.toNamed ,功能是一样的，但是前者要传对应widget而后者需要传已注册的路由名称而已，是不是清晰很多：）