Flutter Getx 路由管理

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方法切换路由

import './Home.dart';

ElevatedButton(
  onPressed: () async {
    Get.to(Home());
  },
  child: Text("跳转到首页")
)

调用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 配置路由以及动画

defaultTransition可以配置默认动画

GetMaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    appBarTheme: const AppBarTheme(
      centerTitle: true,
    )),
  initialRoute: "/",
  defaultTransition: Transition.rightToLeftWithFade,
  getPages: [
  ],
);

GetPage 可以配置动态路由

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import './pages/tabs.dart';
import './pages/shop.dart';
import './pages/user/login.dart';
import './pages/user/registerFirst.dart';
import './pages/user/registerSecond.dart';
import './pages/user/registerThird.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @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);

Flutter Getx 中间件配置

更多详情参考：https://github.com/jonataslaw/getx/blob/master/README.zh-cn.md#redirect

新建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){
    return const RouteSettings(name: '/login');
  }
}

GetPage配置路由

return GetMaterialApp(
  ...
  initialRoute: "/",
  defaultTransition: Transition.rightToLeftWithFade,
  getPages: [
    GetPage(name: "/", page: () => const Tabs()),
    ...
    GetPage(
      name: "/shop",
      page: () => const ShopPage(),
      middlewares: [ShopMiddleWare()]),
  ],
);