Flutter GetX 路由管理之页面跳转方法

Flutter GetX之路由管理

概述

本篇文章主要介绍GetX框架中的Get路由管理。

初始化 GetX

要使用 GetX 需要对 GetX 进行初始化，将默认的 MaterialApp 替换为 GetMaterialApp 即可，这个在项目中已经完成，了解即可。如下:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  /// @description ページ構築
  /// @param: context ページオブジェクト
  /// @return Widget
  @override
  Widget build(BuildContext context) {
    String initialRoute = "/board/construction/id/input";
    // グローバル設定
    return GetMaterialApp(
      theme: ThemeData(useMaterial3: false),
      navigatorKey: Get.key,
      translations: StringRes(),
      locale: const Locale('ja', 'JP'),
      fallbackLocale: const Locale('ja', 'JP'),
      getPages: getPage + getPageOnlyWorker,
      initialRoute: initialRoute,
      popGesture: false,
      builder: EasyLoading.init(),
      supportedLocales: const [Locale('ja', 'JP')],
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
    );
  }
}

GetX路由管理

路由也是 Flutter 项目重要的一环，在 Flutter 中进行页面跳转就是通过路由实现，GetX 提供了 普通路由 和 别名路由。

普通路由

• Get.to: 进入下一个界面

Get.to(CounterPage());

• Get.off: 进入下一个界面，且导航没有返回, 也就是说在进入下一个页面之后，前画面被销毁

Get.off(CounterPage());

• Get.offAll: 进入下一个界面，且导航没有返回，并且销毁之前的所有页面

Get.offAll(CounterPage());

• Get.back: 返回上一个页面

Get.back();

• Get.until()：返回到指定页面

Get.until((route) => Get.currentRoute == '/home')

上面例子中就是返回到路由是'/home'的页面为止

• Get.offUntil: 关闭到符合条件的路由，并跳转到指定路由

Get.offUntil(CounterPage(), (route) => route.settings.name == 'route');

offUntil如果没有找到符合条件的路由会将之前所有的路由依次关闭，也即是只有条件为true时才会停止关闭。

别名路由

首先创建一个 RouteGet（名字自己定义） 的类，用于统一配置路由映射关系：

咱们项目中已经存在这个文件，即 router_util_common.dart 和 router_util_worker.dart这两个文件。这里了解即可

class RouteGet {
  /// page name
  static const String route = "/xxxx";

  ///pages map
  static final List<GetPage> getPages = [
    GetPage(
        name: route, 
        page: () => TestPage(), 
    )
  ];
}

GetPage 定义别名与页面的映射关系。

然后在 GetMaterialApp 进行initialRoute 和 getPages 的配置，即初始页面和路由映射集合:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  /// @description ページ構築
  /// @param: context ページオブジェクト
  /// @return Widget
  @override
  Widget build(BuildContext context) {
    String initialRoute = "/board/construction/id/input";
    // グローバル設定
    return GetMaterialApp(
      theme: ThemeData(useMaterial3: false),
      navigatorKey: Get.key,
      translations: StringRes(),
      locale: const Locale('ja', 'JP'),
      fallbackLocale: const Locale('ja', 'JP'),
      getPages: getPage + getPageOnlyWorker,
      initialRoute: initialRoute,
      popGesture: false,
      builder: EasyLoading.init(),
      supportedLocales: const [Locale('ja', 'JP')],
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
    );
  }
}

*使用方法与普通路由基本相同，只是方法上多了 Named

• Get.toNamed 路由跳转：进入下一个页面

Get.toNamed(route);

• Get.offNamed：同off一样，是同一个意思只是跳转方式不同

Get.offNamed(route);

• Get.offAllNamed: 同offAll一样，进入下一个界面，且导航没有返回，并且销毁之前的所有页面

Get.offAllNamed(route);

• Get.offAndToNamed: 关闭当前页面并跳转到指定路由页面

Get.offAllNamed(route);

• Get.offNamedUntil: 关闭当前路由并跳转到符合条件的路由

Get.offNamedUntil('route', (route) => route.settings.name == 'route');

offNamedUntil如果没有找到符合条件的路由会将之前所有的路由依次关闭，也即是只有条件为true时才会停止关闭。

路由传参数

有2种传递参数的方法：

• arguments传参
• 问号传参（跟URL地址一样）

arguments传参

*发送任何参数都可以接收，不论是什么类型！甚至是类的实例！

使用 arguments 进行参数传递：

Get.to(CounterPage(), arguments: count);

在下个页面获取参数：

dynamic args = Get.arguments;

返回传参：

Get.back(result: 'success');

获取返回参数：

var data = await Get.to(CounterPage());

问号传参

在路由别名后面跟参数，类似于 Url get 传参的方式：只能接收字符串

Get.toNamed("/route?device=phone&id=354&name=Enzo");

使用别名后 Url 传递参数的方式，使用 Get.parameters 获取参数：这里就是直接获取对应的就可以了

Get.parameters['device']

出入栈说明图