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

1,937 阅读3分钟

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.dartrouter_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 进行initialRoutegetPages 的配置,即初始页面和路由映射集合:

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']

出入栈说明图

getx_1.png

getx_2.png

getx_3.png

getx_4.png

getx_5.png

getx_6.png