GetX 为我们封装了 Navigation ,无需 context 可进行跳转,使用 GetX 进行路由跳转非常的简单,
只需要调用 Get.to() 即可进行路由跳转, GetX 路由跳转简化了跳转动画设置 、动画时长定义、动画
曲线设置。
Get.to()实现普通路由跳转
一、设置应用程序入口
当我们导入依赖后,在应用程序顶层把 GetMaterialApp 作为顶层,如下所示
import 'package:flutter/material.dart'; import 'package:get/get.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( //重点 title: "GetX", home: Scaffold( appBar: AppBar( title: Text("GetX Title"), ), ), ); } }
二、调用to方法切换路由
ElevatedButton( onPressed: () async { Get.to(KidPage()); //页面跳转 // Get.to("/page"); }, child: const Text("GetX中路由跳转") )
调用Get.toNamed()跳转到命名路由
以前
Navigator.pushNamed(context, "/login");
使用Getx后
Get.toNamed("/login"); Get.toNamed("/shop",arguments: { "id":20 });
Get.back(); 返回到上一级页面
以前
Navigator.of(context).pop();
使用Getx后
Get.back(); //并返回到上一个页面
Get.offAllNamed("/home"); //将当前页面和所有在栈中的页面移除,用于回到起始页
Get.offAll(); 返回到根
以前
Navigator.of(context).pushAndRemoveUntil( MaterialPageRoute(builder: (BuildContext context) { return const Tabs(index: 4); }) , (route) => false);
使用Getx后
Get.offAll( const Tabs(index: 4));
Get.off(NextScreen());
进入下一个页面,但没有返回上一个页面的选项(用于闪屏页,登录页面等)。
Get.off(NextScreen());
Flutter Getx 配置路由以及动画
GetX可以使用之前命名路由的 onGenerateRoute 也可以使用 getPages 来配置路由;
一、defaultTransition可以配置默认动画
class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return GetMaterialApp( debugShowCheckedModeBanner: false, //去除debug图标 theme: ThemeData(primarySwatch: Colors.red), initialRoute: "/", defaultTransition: Transition.rightToLeftWithFade, //默认动画效果 getPages: [ //配置路由 GetPage(name: "/", page: () => const MypageGet()), GetPage(name: "/MyHomePage", page: () => const MyHomePage()),
GetPage(name: "/hero", page: () {
print("=====@@@@@@@@@=========${Get.arguments}");
return HeroPage(arguments: Get.arguments);}),
],
);
}
}
二、GetPage 可以配置动态路由
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return GetMaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, appBarTheme: const AppBarTheme( centerTitle: true, )), initialRoute: "/", defaultTransition: Transition.rightToLeftWithFade, //页面跳转动画 getPages: [ //配置路由 GetPage(name: "/", page: () => const Tabs()), GetPage(name: "/login", page: () => const LoginPage()), GetPage( name: "/registerFirst", page: () => const RegisterFirstPage(), transition: Transition.rightToLeft), //页面跳转动画 GetPage( name: "/registerSecond", page: () => const RegisterSecondPage()), GetPage(name: "/registerThird", page: () => const RegisterThirdPage()), GetPage(name: "/shop", page: () => const ShopPage()), ], ); } }
三、Getx 路由跳转传值以及接受数据
路由配置
getPages: [ ... GetPage(name: "/shop", page: () => const ShopPage()), ... ],
跳转传值
Get.toNamed("/shop",arguments: { "id":20 });
接受数据
print(Get.arguments);
print(Get.arguments['id']);
Flutter Getx 路由抽离
新建routes.dart
import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:xcx_flutter/page/getX/getx.dart'; import 'package:xcx_flutter/page/homepage.dart'; class APPage { static final routes = [ GetPage(name: "/", page: () => const MypageGet()), GetPage(name: "/MyHomePage", page: () => const MyHomePage()), ]; }
入口
class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return GetMaterialApp( debugShowCheckedModeBanner: false, //去除debug图标 theme: ThemeData(primarySwatch: Colors.red), initialRoute: "/", getPages: APPage.routes, // home: MypageGet(), ); } }
Flutter Getx 中间件配置
新建shopMiddleware.dart
import 'package:flutter/cupertino.dart'; import 'package:get/get.dart'; class ShopMiddleWare extends GetMiddleware { @override // 优先级越低越先执行 int? get priority => -1; @override RouteSettings redirect(String ? route){ print("——————————中间件打印————————————"); print(route); return const RouteSettings(name: '/KidPage'); } }
GetPage配置路由
class APPage { static final routes = [ GetPage(name: "/", page: () => const MypageGet()), GetPage( name: "/MyHomePage", page: () => const MyHomePage(), middlewares: [ShopMiddleWare()]), //中间件使用 // KidPage GetPage(name: "/KidPage", page: () => const KidPage()), ]; }
分类:
Flutter
, Flutter+GetX 状态管理
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库