getx 学习 使用 记录 - 路由

getx 现在非常火的flutter框架 而且使用 比其他同类的 更加简单快捷
学习的时候官网的教程 我看了很迷， 经过后期的使用才慢慢了解 ， 在这里做一个总结 记录

使用

首先在 pubspec.yaml 中引入 get

dependencies:
	get: ^3.21.2  

在 main.dart 中进行注册

  runApp(GetMaterialApp( 
    localizationsDelegates: [   //本地化
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
    ],
    supportedLocales: [   // 本地化
      const Locale('zh', 'CN'),
      const Locale('en', 'US'),
    ],
    initialRoute: '/',     //初始路由 
    theme: appThemeData, // 主题配色
    defaultTransition: Transition.fade,  //页面跳转动画
    getPages: AppPages.pages,    // 路由
    home:   SplashPage(),   //启动页
  ));

官方在 idea 和 vscode 都有插件 可以很方便的加快getx开发

路由

注册路由表

新建 lib/routes/app_routes.dart 与 lib/routes/app_pages.dart

// app_routes.dart
part of './app_pages.dart'; //导入关联
abstract class Routes {
  static const INITIAL = '/';
  static const SPLASH = '/splash';
  static const HOME = '/home';
  static const SEARCH = '/search';
  static const Setting = '/setting';
} 

//app_pages.dart  
import 'package:coupon/modules/search/search_page.dart'; 
import 'package:coupon/modules/setting/setting_page.dart';
import 'package:coupon/modules/tabbar/TabBar_page.dart'; 
import 'package:get/get.dart';
part './app_routes.dart';

abstract class AppPages {
  static final pages = [
    GetPage(
        name: Routes.HOME,
        page: () => TabBarPage(),    
        children: [
          GetPage(
            name: Routes.SEARCH,
            page: () => SearchPage(), 
          ),
        ]
    ),
    GetPage(
      name: Routes.Setting,
      page: () => SettingPage(), 
    ),
  ];
}

这个结构和 vue-router 很相似
建立路由表后 可以 GetMaterialApp 中添加熟悉进行配置

getPages: AppPages.pages,    // 路由

使用路由

getX的跳转路由命令很全面

Get.to(TabBarPage()); // 直接跳转页面 （=Navigation.push()）
Get.toNamed("/home")  // 通过路由表中的名字进行跳转
Get.back();   	     // 关闭当前页面（=Navigation.pop()）
Get.off(TabBarPage())// 跳转页面并关闭之前的页面 (等于 Navigation.pushReplacement() )
Get.offAll(TabBarPage()) //跳转页面并关闭之前全部的页面 (= Navigation.pushAndRemoveUntil)
Get.offNamed("/home")  //  使用路由名 功能同上
Get.offAllNamed("/home")  //  使用路由名 功能同上

子路由跳转

在AppPages 中

  GetPage(
        name: Routes.HOME,   //一级路由 '/home'
        page: () => TabBarPage(),    
        children: [
          GetPage(
            name: Routes.SEARCH,   // 二级路由  '/search'
            page: () => SearchPage(),   
          ),
        ]
    ),

这样的格式可以无限嵌套，

// 访问 HOME
Get.toNamed("/home");
// 访问 SEARCH
Get.toNamed("/home/search");

路由传值

在不同页面中传递参数 get中有三种方式

argment 传递

argments 参数是 dynamic 类型的 ， 与Navigator中的arguments相同,但是在getx中获取却非常方便

// a页面 附带argements参数
Get.toNamed("/b",arguments: true);  
// = Navigator.pushNamed(Get.context, "/b", arguments: true);

//b页面  获取argments参数  (在 build 中)
var data = Get.arguments;
//=   var data = ModalRoute.of(context).settings.arguments;

parameters 传递

parameters接受 Map<String, String>作为参数传递, 他的方式类似与网页传值

//a页面  
Get.toNamed("/b", parameters: {"code":"0"}); 
//或者  使用 拼接形式
Get.toNamed("/b?code=0");

//b页面
var data = Get.parameters;
data['code']   // "0"

parameters 还有一种 传值方式传值通过 绑定路由地址

// 修改路由表  新增 /serach/:id 
GetPage(
    name: Routes.HOME,  // "/home"
    page: () => TabBarPage(), 
    children: [
      GetPage(
        name: Routes.SEARCH,  // "/search"
        page: () => SearchPage(), 
      ),
      GetPage(   //  ********* 新增 *******  
        name: Routes.SEARCH+"/:id",
        page: () => SearchPage(), 
      ),
    ]
),

/search/:id 是home的子路由 那么访问 他的完整链接应该是 “/home/search/:id”

// 跳转 传递参数 
Get.toNamed("/home/search/123");

// 在 search 页面中接收
var data = Get.parameters;
//data =  {"id":"123"}

上面的方式学过前端框架的应该很熟悉

404页面设置

在 GetMaterialApp 的参数 unknownRoute ，他接受一个GetPage 作为参数，当Get路由跳转到没有定义的页面时 将自动转到 此页面

// 在 app_pages中 新增变量
 static final unknownRoute = GetPage(
    name: Routes.SEARCH,
    page: () => Unknown(), 
  );
  
// 在 main.dart  中加入
GetMaterialApp(
 ...
 unknownRoute: AppPages.unknownRoute,
 ...
);

// 当然也可以直接把GetPage声明写在后面

路由拦截

GetPage 中有一个 middlewares 参数，他接收 GetMiddleware 对象列表 作为参数，访问添加middlewares参数的路由都会先 遍历GetMiddleware对象列表 来决定是否能 访问