526互联

Flutter Getx 路由管理

发布时间 2024-01-13 21:25:18作者: 鲤斌
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.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 可以配置动态路由
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()),
  ];
}