[Day20] Flutter GetX routing

这篇主要讲GetX在页面切换之间的路由(上下页的前後文关系)
初步先建立一个routes的资料夹 里面主要有三个档案

app_pages.dart
主要定义了有哪些页面与关系
FirstPage()里的children涵盖了可能会push到下一页的页面(类似详情页)

class AppPages {
  static const initPage = AppRoutes.FirstPage;
  static final routes = [
    GetPage(
      name: AppRoutes.FirstPage,
      page: () => FirstPage(),
      binding: PagesBind(),
      children: [
        GetPage(
          name: AppRoutes.CarouselSlidePage,
          page: () => CarouselSlidePage(),
          binding: PagesBind(),
        ),
        GetPage(
          name: AppRoutes.LottiePage,
          page: () => LottiePage(),
          binding: PagesBind(),
        ),
      ],
    ),
  ];
}

app_routes.dart
里面定义了页面之间的route name

abstract class AppRoutes {
  static const FirstPage = "/FirstPage";
  static const CarouselSlidePage = '/CarouselSlidePage';
  static const LottiePage = '/LottiePage';
  static const ImagePickerPage = '/ImagePickerPage';
  static const CachedImagePage = '/CachedImagePage';
  static const ToastPage = '/ToastPage';
  static const WrapPage = '/WrapPage';
  static const QRCodePage = '/QRCodePage';
  static const QRCodeScanPage = '/QRCodeScanPage';
  static const BindingPage = '/BindingPage';
  static const ExtensionPage = '/ExtensionPage';
  static const NewsPage = '/NewsPage';
}

PagesBind.dart
里面定义了如果push到哪一页 , 与那一页面绑定的GetXcontroller 
生命周期会被呼叫

class PagesBind extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<FirstPageController>(() => FirstPageController());
    Get.lazyPut<CarouselSlidePageController>(() => CarouselSlidePageController());
    Get.lazyPut<LottiePageController>(() => LottiePageController());
    Get.lazyPut<ImagePickPageController>(() => ImagePickPageController());
  }
}

实际要去的页面 这样呼叫
Get.toNamed('CarouselSlidePage);
Get.toNamed('ImagePickerPage);
(对应到app_routes.dart定义的名称)

如果要回前一页
Get.back();

效果借用前几篇的Gif

本篇的GitHub source code

下一篇将为大家介绍 GetX with animation
GetX与原生的AnimationController交互