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