Flutter終極大殺器，一個它頂四個庫！

HeStudy發表於2021-04-02
Flutter

每次新建Flutter專案，是我最痛苦的時間，每次去pub倉庫找庫，再複製貼上到 pubspec.yaml ，再執行 flutter pub get 。這套操作往往需要重複十幾次。畢竟Flutter大到路由，狀態管理，小到工具類，國際化都需要庫來支援，等找齊這些東西，終於可以準備開發的時候，半天已經過去了。

所幸，我在pub倉庫發現了它，GetX，這玩意是真的牛皮，使用它大大小小開發了四五個專案後，確定了穩定性和效能後，決定進行分享一波。

本文只是簡單分享，GetX沒有官方文件，只有github的README，所以我結合自己的經驗，整理了一份。

github

gitee

GetX為何物？

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

  • GetX 有3個基本原則：

    • 效能： GetX 專注於效能和最小資源消耗。GetX 打包後的apk佔用大小和執行時的記憶體佔用與其他狀態管理外掛不相上下。如果你感興趣，這裡有一個效能測試。
    • 效率： GetX 的語法非常簡捷，並保持了極高的效能，能極大縮短你的開發時長。
    • 結構： GetX 可以將介面、邏輯、依賴和路由完全解耦，用起來更清爽，邏輯更清晰，程式碼更容易維護。

  • GetX 並不臃腫，卻很輕量。如果你只使用狀態管理，只有狀態管理模組會被編譯，其他沒用到的東西都不會被編譯到你的程式碼中。它擁有眾多的功能，但這些功能都在獨立的容器中，只有在使用後才會啟動。

GetX能幹什麼？

GetX包含的功能：

  • 狀態管理
  • 路由
  • 國際化
  • 工具類
  • IDE擴充
  • 工程化Cli
  • ......

GetX的優點？

對於一個菜鳥來說，它最大的優點當然是 簡單易上手

舉幾個例子：

狀態管理

建立一個 Controller 管理你的狀態變數

class Controller extends GetxController{
  var count = 0.obs;
  increment() => count++;
}
複製程式碼

然後直接使用

class Home extends StatelessWidget {

  @override
  Widget build(context) {

    // 使用Get.put()例項化你的類，使其對當下的所有子路由可用。
    final Controller c = Get.put(Controller());

    return Scaffold(
      // 使用Obx(()=>每當改變計數時，就更新Text()。
      appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),

      // 用一個簡單的Get.to()即可代替Navigator.push那8行，無需上下文！
      body: Center(child: ElevatedButton(
              child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
  }
}

class Other extends StatelessWidget {
  // 你可以讓Get找到一個正在被其他頁面使用的Controller，並將它返回給你。
  final Controller c = Get.find();

  @override
  Widget build(context){
     // 訪問更新後的計數變數
     return Scaffold(body: Center(child: Text("${c.count}")));
  }
}
複製程式碼

你只需要 put 一個 Controller 後，再將 widget 包裹在 Obx 中，這樣就將 count 繫結在了你的 widget 中，只要 count 發生改變， widget 就很跟著更新。

注意，Controller是與Widget解耦的，只有進行了put才會進行繫結，所以是區域性狀態還是全域性狀態完全由你自己決定。

路由

GetX的路由最大的特點就是，不需要 context ，直接使用即可

導航到新頁面

Get.to(NextScreen());
複製程式碼

用別名導航到新頁面。

Get.toNamed('/details');
複製程式碼

要關閉snackbars, dialogs, bottomsheets或任何你通常會用Navigator.pop(context)關閉的東西。

Get.back();
複製程式碼

進入下一個頁面，但沒有返回上一個頁面的選項（用於閃屏頁，登入頁面等）。

Get.off(NextScreen());
複製程式碼

進入下一個頁面並取消之前的所有路由（在購物車、投票和測試中很有用）。

Get.offAll(NextScreen());
複製程式碼

國際化

GetX的國際化尤其簡單，我們只需要新建一個 Translations 類

import 'package:get/get.dart';

class Messages extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'zh_CN': {
          'hello': '你好 世界',
        },
        'de_DE': {
          'hello': 'Hallo Welt',
        }
      };
}
複製程式碼

並且將你的 MaterialApp 更改為 GetMaterialApp ，並繫結上剛剛建立的 Translations 類。

不用擔心，GetMaterialApp支援所有MaterialApp的介面，它們是相容的

return GetMaterialApp(
    translations: Messages(), // 你的翻譯
    locale: Locale('zh', 'CN'), // 將會按照此處指定的語言翻譯
    fallbackLocale: Locale('en', 'US'), // 新增一個回撥語言選項，以備上面指定的語言翻譯不存在
);
複製程式碼

然後直接使用

Text('title'.tr);
複製程式碼

是的，你只需要在字串後面加上 .tr 即可使用國際化功能

GetX Cli是何物？

GetX Cli是一個命令列指令碼，類似vue cli，但更強大一些，它可以做到：

  • 建立專案
  • 專案工程化
  • 生成Model
  • 生成page
  • 生成view
  • 生成controller
  • 自定義controller模板
  • 生成翻譯檔案
  • ......

想要使用GetX Cli，你需要安裝dart環境或者Flutter環境

然後直接安裝即可使用

pub global activate get_cli 
# or
flutter pub global activate get_cli
複製程式碼

建立專案

get create project:my_project
複製程式碼

這個命令會呼叫 flutter create ，然後再執行 get init

專案工程化

get init
複製程式碼

生成page

get create page:home
複製程式碼

生成controller

get create controller:dialogcontroller on home
複製程式碼

生成view

get create view:dialogview on home
複製程式碼

生成model

get generate model on home with assets/models/user.json
複製程式碼

更多詳細命令去看文件吧

IDE擴充

結語

祝大家在程式設計路上飛黃騰達，越走越遠。

相關文章