Flutter Getx路由管理,页面跳转与传值
GetX是一个简单、高效、强大的管理状态、路由管理库。GetX为我们封装了Navigation,无需传入context可进行跳转,并且能很方便的使用跳转动画。
一、路由的用法
使用路由之前需要把MaterialApp换成GetMaterialApp,这十分重要!
应用程序入口设置
当我们导入依赖后,在应用程序顶层把GetMaterialApp 作为顶层,如下所示
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
//MaterialApp之前是这样
return const GetMaterialApp(
debugShowCheckedModeBanner: false, //去掉debug图标
title: 'Flutter GetX',
home: MyHomePage(),
);
}
}
1、普通路由导航
1.1、Get.to()实现普通路由跳转,跳转到新页面
从当前页面进入到一个新页面,to接收一个页面组件
ElevatedButton(
onPressed: () async {
Get.to(NextScreen());
},
child: Text("跳转到新页面")
)
1.2 back关闭路由,返回到上一级页面
//系统跳转方式:
Navigator.of(context).pop();
//Getx跳转方式:
Get.back();
1.3、Get.toNamed()跳转到命名路由,可带参数传值
//系统跳转方式
Navigator.pushNamed(context, "/registerPhone")
//Getx跳转方式
//没有携带参数
Get.toNamed("/registerPhone");
//携带参数
Get.toNamed("/registerPhone",arguments: { "id":20 });
//接受数据
print(Get.arguments);
1.4、Get.off(NextScreen());
进入下一个页面,但没有返回上一个页面的选项(用于闪屏页,登录页面等)。
1.5、Get.offAll(); 返回到根路由,清空历史路由
该方法会清空我们之前打开过的页面,只留下新的页面(在购物车、投票和注册登录中很有用)。
//系统跳转方式 返回到根页面
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (BuildContext context) {
return const HomePage();
}), (route) => false);
//Getx跳转方式
Get.offAll(NextScreen());
二、配置路由动画与配置动态路由
GetMaterialApp(
debugShowCheckedModeBanner: false, //去掉debug图标
title: 'Flutter 路由管理',
theme: ThemeData(
primarySwatch: Colors.blue,
appBarTheme: const AppBarTheme(
centerTitle: true,
)),
// 初始化路由
initialRoute: "/",
// 配置路由动画
defaultTransition: Transition.rightToLeft,
// 配置动态路由
getPages: [
GetPage(name: "/", page: () => const HomePage()),
GetPage(
name: "/registerPhoneCode",
page: () => const RegisterPhoneCodePage(),
),
GetPage(
name: "/registerPhone", page: () => const RegisterPhonePage(),
transition: Transition.downToUp),
GetPage(
name: "/registerSuccess",
page: () => const RegisterSuccessPage()),
GetPage(
name: "/cart",
middlewares: [
// 中间件执行的顺序
CartAuthMiddleware(priority: 1)
],
page: () => const CartPage()),
]);
三、路由中间件 Redirect
当被调用路由的页面被搜索时,这个函数将被调用。它将RouteSettings作为重定向的结果。或者给它null,就没有重定向了。
中间件优先级
设置中间件的优先级定义Get中间件的执行顺序。这些中间件会按这个顺序执行 -8 => 2 => 4 => 5
final middlewares = [
GetMiddleware(priority: 2),
GetMiddleware(priority: 5),
GetMiddleware(priority: 4),
GetMiddleware(priority: -8),
];
class CartAuthMiddleware extends GetMiddleware{
@override
CartAuthMiddleware({required priority});
@override
RouteSettings? redirect(String? route){
// return null; //为null,就没有重定向了
Future.delayed(Duration(seconds: 1), () => Get.snackbar("提示", "请先登录后操作"));
//没有权限跳转到指定页面
return const RouteSettings(name:"/registerPhone",arguments:{});
}
}
//配置路由
GetPage(
name: "/cart",
middlewares: [
// 中间件执行的顺序
CartAuthMiddleware(priority: 1)
],
page: () => const CartPage()),