Flutter Getx 路由管理

标签：const name Get GetPage page Getx Flutter 路由

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()),
  ];
}

 

 

 

标签：const,name,Get,GetPage,page,Getx,Flutter,路由
From： https://www.cnblogs.com/xbinbin/p/17959659