[TOC] > [github](https://github.com/jonataslaw/getx/blob/master/README.zh-cn.md) ## 概述 * **性能：** GetX 專注于性能和最小資源消耗。GetX 打包后的apk占用大小和運行時的內存占用與其他狀態管理插件不相上下。如果你感興趣，這里有一個[性能測試](https://github.com/jonataslaw/benchmarks)。 * **效率：** GetX 的語法非常簡捷，并保持了極高的性能，能極大縮短你的開發時長。 * **結構：** GetX 可以將界面、邏輯、依賴和路由完全解耦，用起來更清爽，邏輯更清晰，代碼更容易維護。 * Getx有一個龐大的生態系統，能夠在Android、iOS、Web、Mac、Linux、Windows和你的服務器上用同樣的代碼運行。**通過[Get Server](https://github.com/jonataslaw/get_server)**可以在你的后端完全重用你在前端寫的代碼。 ### 狀態管理 響應式設置變量 ``` var name = 'Jonatas Borges'; var name = 'Jonatas Borges'.obs; Obx(() => Text("${controller.name}")); ``` ### 路由管理 可以免去 context 的上下文 ``` // 在你的MaterialApp前加上 "Get"，把它變成GetMaterialApp GetMaterialApp( // Before: MaterialApp( home: MyHome(), ) // 導航到新頁面 Get.to(NextScreen()); // 用別名導航到新頁面 Get.toNamed('/details'); // 要關閉snackbars, dialogs, bottomsheets或任何你通常會用Navigator.pop(context)關閉的東西 Get.back(); // 沒有返回的跳轉,如登錄頁 Get.off(NextScreen()); // 進入下一個頁面并取消之前的所有路由（在購物車、投票和測試中很有用） Get.offAll(NextScreen()); ``` ### 依賴管理 ``` //Get有一個簡單而強大的依賴管理器 Controller controller = Get.put(Controller()); // 而不是 Controller controller = Controller(); ``` ### 國際化 ``` 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', } }; } ``` 只要將.tr追加到指定的鍵上，就會使用Get.locale和Get.fallbackLocale的當前值進行翻譯。 ``` Text('title'.tr); ``` 傳遞參數給GetMaterialApp來定義語言和翻譯。 ``` return GetMaterialApp( translations: Messages(), // 你的翻譯 locale: Locale('zh', 'CN'), // 將會按照此處指定的語言翻譯 fallbackLocale: Locale('en', 'US'), // 添加一個回調語言選項，以備上面指定的語言翻譯不存在 ); ``` 改變語言 ``` var locale = Locale('en', 'US'); Get.updateLocale(locale); ``` 系統語言 ``` import 'dart:ui' as ui; return GetMaterialApp( locale: ui.window.locale, ); ``` ### GetConnect 你能輕松的通過extend GetConnect就能使用GET/POST/PUT/DELETE/SOCKET方法與你的Rest API或websockets通信。 ``` class UserProvider extends GetConnect { // Get request Future<Response> getUser(int id) => get('http://youapi/users/$id'); // Post request Future<Response> postUser(Map data) => post('http://youapi/users', body: data); // Post request with File Future<Response<CasesModel>> postCases(List<int> image) { final form = FormData({ 'file': MultipartFile(image, filename: 'avatar.png'), 'otherFile': MultipartFile(image, filename: 'cover.png'), }); return post('http://youapi/users/upload', form); } GetSocket userMessages() { return socket('https://yourapi/users/socket'); } } ``` ### GetPage 中間件 **Redirect** 當被調用路由的頁面被搜索時，這個函數將被調用。它將RouteSettings作為重定向的結果。或者給它null，就沒有重定向了。 ``` RouteSettings redirect(String route) { final authService = Get.find<AuthService>(); return authService.authed.value ? null : RouteSettings(name: '/login') } ``` **onPageCalled** 在調用頁面時，創建任何東西之前，這個函數會先被調用。 您可以使用它來更改頁面的某些內容或給它一個新頁面。 ``` GetPage onPageCalled(GetPage page) { final authService = Get.find<AuthService>(); return page.copyWith(title: 'Welcome ${authService.UserName}'); } ``` **OnBindingsStart** 這個函數將在綁定初始化之前被調用。 在這里，您可以更改此頁面的綁定。 ```List<Bindings> onBindingsStart(List<Bindings> bindings) { final authService = Get.find<AuthService>(); if (authService.isAdmin) { bindings.add(AdminBinding()); } return bindings; } ``` **OnPageBuildStart ** 這個函數將在綁定初始化之后被調用。 在這里，您可以在創建綁定之后和創建頁面widget之前執行一些操作。 ``` GetPageBuilder onPageBuildStart(GetPageBuilder page) { print('bindings are ready'); return page; } ``` **OnPageBuilt** 這個函數將在GetPage.page調用后被調用，并給出函數的結果，并獲取將要顯示的widget。 **OnPageDispose** 這個函數將在處理完頁面的所有相關對象(Controllers, views, ...)之后被調用。 ### 其他高級API ``` // 給出當前頁面的args。 Get.arguments //給出以前的路由名稱 Get.previousRoute // 給出要訪問的原始路由，例如，rawRoute.isFirst() Get.rawRoute // 允許從GetObserver訪問Rounting API。 Get.routing // 檢查 snackbar 是否打開 Get.isSnackbarOpen // 檢查 dialog 是否打開 Get.isDialogOpen // 檢查 bottomsheet 是否打開 Get.isBottomSheetOpen // 刪除一個路由。 Get.removeRoute() //反復返回，直到表達式返回真。 Get.until() // 轉到下一條路由，并刪除所有之前的路由，直到表達式返回true。 Get.offUntil() // 轉到下一個命名的路由，并刪除所有之前的路由，直到表達式返回true。 Get.offNamedUntil() //檢查應用程序在哪個平臺上運行。 GetPlatform.isAndroid GetPlatform.isIOS GetPlatform.isMacOS GetPlatform.isWindows GetPlatform.isLinux GetPlatform.isFuchsia //檢查設備類型 GetPlatform.isMobile GetPlatform.isDesktop //所有平臺都是獨立支持web的! //你可以知道你是否在瀏覽器內運行。 //在Windows、iOS、OSX、Android等系統上。 GetPlatform.isWeb // 相當于.MediaQuery.of(context).size.height, //但不可改變。 Get.height Get.width // 提供當前上下文。 Get.context // 在你的代碼中的任何地方，在前臺提供 snackbar/dialog/bottomsheet 的上下文。 Get.contextOverlay // 注意：以下方法是對上下文的擴展。 // 因為在你的UI的任何地方都可以訪問上下文，你可以在UI代碼的任何地方使用它。 // 如果你需要一個可改變的高度/寬度（如桌面或瀏覽器窗口可以縮放），你將需要使用上下文。 context.width context.height // 讓您可以定義一半的頁面、三分之一的頁面等。 // 對響應式應用很有用。 // 參數： dividedBy (double) 可選 - 默認值：1 // 參數： reducedBy (double) 可選 - 默認值：0。 context.heightTransformer() context.widthTransformer() /// 類似于 MediaQuery.of(context).size。 context.mediaQuerySize() /// 類似于 MediaQuery.of(context).padding。 context.mediaQueryPadding() /// 類似于 MediaQuery.of(context).viewPadding。 context.mediaQueryViewPadding() /// 類似于 MediaQuery.of(context).viewInsets。 context.mediaQueryViewInsets() /// 類似于 MediaQuery.of(context).orientation; context.orientation() ///檢查設備是否處于橫向模式 context.isLandscape() ///檢查設備是否處于縱向模式。 context.isPortrait() ///類似于MediaQuery.of(context).devicePixelRatio。 context.devicePixelRatio() ///類似于MediaQuery.of(context).textScaleFactor。 context.textScaleFactor() ///查詢設備最短邊。 context.mediaQueryShortestSide() ///如果寬度大于800，則為真。 context.showNavbar() ///如果最短邊小于600p，則為真。 context.isPhone() ///如果最短邊大于600p，則為真。 context.isSmallTablet() ///如果最短邊大于720p，則為真。 context.isLargeTablet() ///如果當前設備是平板電腦，則為真 context.isTablet() ///根據頁面大小返回一個值<T>。 ///可以給值為： ///watch：如果最短邊小于300 ///mobile：如果最短邊小于600 ///tablet：如果最短邊（shortestSide）小于1200 ///desktop：如果寬度大于1200 context.responsiveValue<T>() ``` ## 示例 ### 創建一個計數器 ``` 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}"))); } } ```