Getx 状态管理 · PHP/Python/前端/Linux 等等学习笔记

[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}"))); } } ```