Flutter GetX 之 路由管理

路由管理是插件GetX常用功能之一,为什么说之一呢?因为GetX的功能远不止路由管理这么简单。

GetX的重要功能如下:

|------------|------------|-----------|----------|-----------------|-----------------|----------------|
| 1、路由管理 | 2、状态管理 | 3、国际化 | 4、主题 | 5、GetUtil工具 | 6、dialog 弹框 | 7、snackbar |

其实上面功能介绍的还是不够详细,GetX还支持网络请求等

今天主要介绍一下GetX的路由管理

首先需要将Flutter项目入口MaterialApp 替换成GetX提供的GetMaterialApp,代码示例如下:

Dart 复制代码
return MaterialApp(
    home: MyHomePage(),
);

Dart 复制代码
return GetMaterialApp(
   home: MyHomePage(),
);

接下来就是创建路由管理类 router_util.dart,这个类负责统一把所有页面进行路由设置,GetX设置路由代码如下:

GetPage(name: "/login", page: () => LoginPage()),

GetPage 便是设置一个类的路由

"/login" 为使用过程中的Key,page: 为指向的页面。

下面是路由管理类的完整代码

Dart 复制代码
import 'package:get/get.dart';

import '../view/login/forget/forget_view.dart';
import '../view/login/login_view.dart';
import '../view/login/register/register_view.dart';
import '../view/main/tab_bar/tab_bar_view.dart';

List<GetPage> get pages => [
      GetPage(name: "/login", page: () => LoginPage()),
      GetPage(name: "/tabbar", page: () => TabBarPage()),
      GetPage(name: "/register", page: () => RegisterPage()),
      GetPage(name: "/password", page: () => ForgetPage()),
    ];

我们将路由管理设置完以后,下面就是路由注入了,注入代码简单,便是将pages放入到的getPages中即可。当然当我们使用路由管理后,我们需要设置一下程序入口initialRoute,完整代码如下:

Dart 复制代码
return GetMaterialApp(
  getPages: pages,
  initialRoute: "/login",
);

到此就完成了路由管理的配置,下面介绍一下路由的使用,推荐使用++别名路由++。

普通路由

页面跳转

Dart 复制代码
Get.to(RegisterPage());

带参数

Dart 复制代码
Get.to(RegisterPage(),arguments: "范型");

arguments 未范型,什么类型都可以

参数获取

Dart 复制代码
dynamic arguments = Get.arguments;

off: 进入下一个界面,且导航没有返回

Dart 复制代码
Get.off(RegisterPage());

offAll: 进入下一个界面并取消之前的所有路由

Dart 复制代码
Get.offAll(RegisterPage());

**back:**返回

Dart 复制代码
Get.back();

返回时带参数

Dart 复制代码
Get.back(result: '返回参数');

**result:**也为范型,可为任何类型

获取参数

Dart 复制代码
var result = await Get.to(RegisterPage());

别名路由

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

路由跳转

Dart 复制代码
Get.toNamed("/register");

带参数

Dart 复制代码
Get.toNamed("/register",arguments: "范型");

也可以想Vue里面的方式进行跳转和传参(不推荐,使用不方便

Dart 复制代码
Get.toNamed("/register?id=1&name=王哪跑");

获取参数和普通路由一致

使用Vue方式传参获取参数方式如下

Dart 复制代码
Get.parameters['id']

进入下一个界面并取消之前的所有路由

Dart 复制代码
Get.offAllNamed("/tabbar");

返回和返回带参数使用方式与普通路由保持一致。

到此就完成了GetX路由管理的使用。

GetX功能很强大,路由管理是比较常用的功能。

GetX后续功能将会持续介绍使用,下一片文章会介绍一下GetX状态管理

相关推荐
君蓦7 小时前
Flutter 本地存储与数据库的使用和优化
flutter
problc16 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
lqj_本人1 天前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人1 天前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔1 天前
Flutter启动流程(2)
flutter
hello world smile1 天前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人1 天前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai1 天前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人1 天前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos