Flutter一個輕量且強大的外掛：GetX 之路由管理

Qson發表於2021-04-01
Flutter路由

GetX 是 Flutter 上的一個輕量且強大的解決方案：高效能的狀態管理、智慧的依賴注入和便捷的路由管理。

GetX官方以低功能、高效能、低耦合為基本原則，以輕量級的方式，給開發者提供眾多功能。

GetX所能提供的功能包括：狀態管理、路由管理、依賴管理，提供如國際化、主題等等更多實用工具，今天我們來看下GetX 之路由管理是怎麼樣的。

以往在使用路由管理時，都繞不開上下文（context），如

Navigator.pushNamed(context, '/login', arguments: arguments);
複製程式碼

或

Navigator.pop(context)
複製程式碼

都需要一個context上下文，既是封裝也都需要從widget builder傳入context。接下來我們看看getX路由是多麼方便。

GetX依賴

使用getX，首先要引入依賴庫，pubspec.yaml加入該庫，並拉取依賴到本地。

get: ^3.25.0
複製程式碼

然後在用到的地方引入標頭檔案

import 'package:get/get.dart';
複製程式碼

GetX路由管理

普通路由導航
  • 在你的MaterialApp前加上 "Get"，把它變成GetMaterialApp。
void main() {
  runApp(
    GetMaterialApp(
      home: HomePage(), 
    ),
  );
}
複製程式碼
  • 導航到新頁面
Get.to(LoginPage());
複製程式碼
  • pop 返回、關閉snackbars, dialogs, bottomsheets
Get.back();
複製程式碼
  • push到下一頁，但禁止從下一頁返回過來
Get.off(LoginPage());
複製程式碼

可以用在啟動屏、登入頁中。

  • push到下一頁，並且從棧內移除以前的所有路由
Get.offAll(LoginPage());
複製程式碼

可以發現，上面的push和pop方式，不需要傳遞context,省下了很多麻煩，這個GetX在路由管理的最大優勢，這樣增加了路由管理的書寫範圍，擴大了你程式碼靈活性，不用擔心context在哪，而特意使用builder。

當然，這裡路由管理也可以使用別名導航。

別名路由導航

如果你習慣使用別名路由導航，GetX也支援

  • 要使用別名路由導航，需要定義路由，在main函式內使用GetMaterialApp，並設定相關屬性。
void main() {
  // 別名路由配置
  runApp(
    GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => OnePage()),
        GetPage(
            name: '/two', page: () => TwoPage(), transition: Transition.zoom),
      ],
    ),
  );
}
複製程式碼

GetMaterialApp下還有一個屬性unknownRoute，可以設定未定義路由的導航，如錯誤頁面。

unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage()),
複製程式碼
  • push到下一頁
Get.toNamed("/two");
複製程式碼
  • push下一頁並移除前一個頁面。
Get.offNamed("/two");
複製程式碼
  • push下一頁並移除所有之前的頁面
Get.offAllNamed("/two");
複製程式碼
  • push時攜帶資料

主要在後面加上你要傳遞的資料即可

Get.toNamed("/two", arguments: 'www.qson.tech');
複製程式碼

在你別名為two的頁面通過Get.arguments即可獲取資料。

下一篇帶大家瞭解GetX的響應式狀態管理器，更多關於GetX的內容，後續會繼續發出，Demo地址：github.com/Qson8/flutt…

歡迎關注公眾號：Hi Flutter

相關文章