< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

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()),
  ];
}
复制代码

 

 

 

posted on   鲤斌  阅读(1977)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示