這篇主要講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交互