Flutter終極大殺器,一個它頂四個庫!

HeStudy發表於2021-04-02

每次新建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擴充

結語

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

相關文章