GetX功能介绍

  • 依赖注入
    • GetX是通过依赖注入的方式，存储相应的XxxGetxController；已经脱离了InheritedWidget那一套玩法，自己手动去管理这些实例，使用场景被大大拓展
    • 简单的思路，却能产生深远的影响：优雅的跨页面功能便是基于这种设计而实现的、获取实例无需BuildContext、GetBuilder自动化的处理及其减少了入参等等
  • 跨页面交互
    • 这绝对是GetX的一个优点！对于复杂的生产环境，跨页面交互的场景，实在太常见了，GetX的跨页面交互，几乎和fish_redux一样简单。
  • 路由管理
    • 是的，getx内部实现了路由管理，而且用起来，那叫一个简单！bloc没实现路由管理，这让我不得不去找一个star量高的路由管理框架，就选择了fluro，但是让我不得不说，这个fluro用起来真的叫一个折磨人，每次新建一个页面，最让我抗拒的就是去写fluro路由代码，横跨几个文件来回写，真是肝疼
    • GetX实现了动态路由传参，也就是说直接在命名路由上拼参数，然后能拿到这些拼在路由上的参数，也就是说用flutter写H5，直接能通过Url传值（fluro也能做到）
  • 实现了全局BuildContext
  • 国际化，主题实现。

使用

引用

  1. # getx 状态管理框架 https://pub.flutter-io.cn/packages/get
  2. # 非空安全最后一个版本（flutter 2.0之前版本）
  3. get: ^3.26.0
  5. # 空安全版本 最新版本请查看  https://pub.flutter-io.cn/packages/get
  6. get: ^4.3.8
  • Github：jonataslaw/getx

  • Pub：get

    程序入口

  • 只需要将MaterialApp改成GetMaterialApp即可 ```dart void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( home: CounterGetPage(), ); } }

  1. <a name="gWQW7"></a>
  2. ### 插件
  3. **此外，为了进一步提高您的生产效率，我们还为您准备了一些插件**
  5. - **getx_template**：一键生成每个页面必需的文件夹、文件、模板代码等等
  6.    - [Android Studio/Intellij插件](https://plugins.jetbrains.com/plugin/15919-getx)
  7. - **GetX Snippets**：输入少量字母，自动提示选择后，可生成常用的模板代码
  8.    - [Android Studio/Intellij扩展](https://plugins.jetbrains.com/plugin/14975-getx-snippets)
  9.    - [VSCode扩展](https://marketplace.visualstudio.com/items?itemName=get-snippets.get-snippets)
  11. <a name="Caanv"></a>
  12. ### 计数器程序
  13. > 实现一个计数器程序来看下GetX如何将逻辑层和界面层解耦。
  15. 1. 创建一个 get_x_demo 的 flutter 项目。
  16. 1. 安装 getx。
  17. ```shell
  18. flutter pub add get
  1. 利用插件生成文件。

image.png

  1. 修改主入口 ```dart import ‘package:flutter/material.dart’; import ‘package:get/get.dart’;

import ‘counter_get/view.dart’;

void main() { runApp(const MyApp()); }

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return GetMaterialApp( title: ‘Flutter Demo’, theme: ThemeData(primarySwatch: Colors.blue), home: const CounterGetPage(), ); } }

  2. 5. 编写逻辑层代码
  3. ```dart
  4. import 'package:get/get.dart';
  6. class CounterGetLogic extends GetxController {
  7.   var count = 0.obs;
  9.   /// 自增
  10.   void increase() => ++count;
  12.   /// 自减
  13.   void remove() => --count;
  14. }
  1. 编写视图层代码 ```dart import ‘package:flutter/material.dart’; import ‘package:get/get.dart’;

import ‘logic.dart’;

class CounterGetPage extends StatelessWidget { const CounterGetPage({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { final logic = Get.put(CounterGetLogic()); return Scaffold( appBar: AppBar( title: const Text(“GetX Count”), ), body: Center( child: Obx(() { return Text( logic.count.value.toString(), style: const TextStyle(fontSize: 24), ); }), ), floatingActionButton: Column( mainAxisSize: MainAxisSize.min, children: [ FloatingActionButton( heroTag: “add”, onPressed: logic.increase, child: const Icon(Icons.add), ), const SizedBox(height: 10), FloatingActionButton( heroTag: “sub”, onPressed: logic.remove, backgroundColor: Colors.red, child: const Icon(Icons.remove), ) ], ), ); } }

  2. 7. 运行程序
  4. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/179485/1632280372394-d373840d-424f-4fb6-b2f6-a3f88cdef320.png#clientId=ud52e82e4-288e-4&from=paste&height=697&id=ue03bf6bc&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1394&originWidth=822&originalType=binary&ratio=1&size=67366&status=done&style=none&taskId=u9968abd5-1180-4fa6-9e69-20d4b20b6fc&width=411)
  6. <a name="uBWp1"></a>
  7. ## 状态管理
  8. <a name="L6Nsl"></a>
  9. ### 响应式状态管理
  10. > 上面的实例中，我们看到两个关键字「obs」和「obx」，配合使用即可。
  12. <a name="XC8wi"></a>
  13. #### 基本数据类型
  14. > 定义一个需要状态管理的变量。obs是响应式状态管理，自动完成数据更新。
  16. Obx()方法刷新的条件
  18. - 只有当响应式变量的值发生变化时，才会会执行刷新操作，当某个变量初始值为：“test”，再赋值为：“test”，并不会执行刷新操作
  19. - 当你定义了一个响应式变量，该响应式变量改变时，包裹该响应式变量的Obx()方法才会执行刷新操作，其它的未包裹该响应式变量的Obx()方法并不会执行刷新操作。
  20. <a name="qSEuS"></a>
  21. #### 基于类的使用
  22. ```dart
  23. import 'package:get/get.dart';
  24. import 'package:get_x_demo/user_obs/user.dart';
  25. import 'dart:math';
  27. class UserObsLogic extends GetxController {
  28.   final _names = ["JsonYe", "LiuLi", "Luna", "Tomer"];
  29.   final user = User().obs;
  31.   @override
  32.   void onInit() {
  33.     super.onInit();
  34.     updateUser();
  35.   }
  37.   void updateUser() {
  38.     User _user = User(
  39.         name: _names[Random().nextInt(3)],
  40.         age: 30 + Random().nextInt(50),
  41.         sex: Random().nextBool());
  42.     user.update((val) {
  43.       val?.name = _user.name;
  44.       val?.age = _user.age;
  45.       val?.sex = _user.sex;
  46.     });
  47.   }
  48. }
  50. class User {
  51.   String? name;
  52.   int? age;
  53.   bool? sex;
  55.   User({this.name, this.age, this.sex});
  56. }
  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  4. import 'logic.dart';
  6. class UserObsPage extends StatelessWidget {
  7.   const UserObsPage({Key? key}) : super(key: key);
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     final logic = Get.put(UserObsLogic());
  12.     return Scaffold(
  13.       appBar: AppBar(
  14.         title: const Text("Object obs"),
  15.       ),
  16.       body: Center(
  17.         child: Obx(() {
  18.           return DefaultTextStyle(
  19.             style: const TextStyle(color: Colors.black, fontSize: 30),
  20.             child: Column(
  21.               mainAxisSize: MainAxisSize.min,
  22.               children: [
  23.                 Text("${logic.user.value.name}"),
  24.                 Text("${logic.user.value.age}"),
  25.                 Text("${logic.user().sex}"),
  26.               ],
  27.             ),
  28.           );
  29.         }),
  30.       ),
  31.       floatingActionButton: FloatingActionButton(
  32.         onPressed: logic.updateUser,
  33.         child: const Icon(Icons.sync),
  34.       ),
  35.     );
  36.   }
  37. }

简单状态管理

通过GetBuilder组件构建，update()方法手动更新。

  1. import 'dart:math';
  3. import 'package:get/get.dart';
  5. class BasicGetLogic extends GetxController {
  6.   final _names = ["JsonYe", "LiuLi", "Luna", "Tomer"];
  7.   String? name;
  8.   int? age;
  9.   bool? sex;
  11.   @override
  12.   void onInit() {
  13.     super.onInit();
  14.     updateUser();
  15.   }
  17.   void updateUser() {
  18.     name = _names[Random().nextInt(3)];
  19.     age = 30 + Random().nextInt(50);
  20.     sex = Random().nextBool();
  21.     update();
  22.   }
  23. }
  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  4. import 'logic.dart';
  6. class BasicGetPage extends StatelessWidget {
  7.   const BasicGetPage({Key? key}) : super(key: key);
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     final logic = Get.put(BasicGetLogic());
  12.     return Scaffold(
  13.       appBar: AppBar(
  14.         title: const Text("Basic GetX"),
  15.       ),
  16.       body: Center(
  17.         child: GetBuilder<BasicGetLogic>(
  18.           builder: (_logic) {
  19.             return DefaultTextStyle(
  20.               style: const TextStyle(color: Colors.black, fontSize: 30),
  21.               child: Column(
  22.                 mainAxisSize: MainAxisSize.min,
  23.                 children: [
  24.                   Text("${_logic.name}"),
  25.                   Text("${_logic.age}"),
  26.                   Text("${_logic.sex}"),
  27.                 ],
  28.               ),
  29.             );
  30.           },
  31.         ),
  32.       ),
  33.       floatingActionButton: FloatingActionButton(
  34.         onPressed: logic.updateUser,
  35.         child: const Icon(Icons.sync),
  36.       ),
  37.     );
  38.   }
  39. }

Obx和GetBuilder比较

分析

  • Obx是配合Rx响应式变量使用、GetBuilder是配合update使用：请注意，这完全是俩套定点刷新控件的方案
    • 区别：前者响应式变量变化，Obx自动刷新；后者需要使用update手动调用刷新
  • 每一个响应式变量，都需要生成对应的GetStream，占用资源大于基本数据类型，会对内存造成一定压力

  • GetBuilder内部实际上是对StatefulWidget的封装，所以占用资源极小

    使用场景

  • 一般来说，对于大多数场景都是可以使用响应式变量的

  • 但是，在一个包含了大量对象的List，都使用响应式变量，将生成大量的GetStream，必将对内存造成较大的压力，该情况下，就要考虑使用简单状态管理了
  • 总的来说：推荐GetBuilder和update配合的写法
    • GetBuilder内置回收GetxController的功能，能避免一些无法自动回收GetxController的坑爹问题
      • 使用GetBuilder的自动回收：GetBuilder需要设置assignId: true；或使用插件一键Wrap Widget：GetBuilder（Auto Dispose）
    • 使用Obx，相关变量定义初始化以及实体更新和常规写法不同，会对初次接触该框架的人，造成很大的困扰
    • getx插件现已支持一键Wrap Widget生成GetBuilder，可以一定程度上提升你的开发效率

跨页面交互

页面1

  1. import 'package:get/get.dart';
  2. import 'package:get_x_demo/more_page_get/page_two_get/view.dart';
  4. class PageOneGetLogic extends GetxController {
  5.   var count = 0;
  7.   void toTwoPage() {
  8.     Get.to(const PageTwoGetPage());
  9.   }
  11.   void increase() {
  12.     count = ++count;
  13.     update();
  14.   }
  15. }
  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  4. import 'logic.dart';
  6. class PageOneGetPage extends StatelessWidget {
  7.   const PageOneGetPage({Key? key}) : super(key: key);
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     final logic = Get.put(PageOneGetLogic());
  12.     return Scaffold(
  13.       backgroundColor: Colors.white,
  14.       appBar: AppBar(title: const Text('One Page')),
  15.       floatingActionButton: FloatingActionButton(
  16.         onPressed: logic.toTwoPage,
  17.         child: const Icon(Icons.arrow_forward_outlined),
  18.       ),
  19.       body: Center(
  20.         child: GetBuilder<PageOneGetLogic>(
  21.           builder: (logic) {
  22.             return Text(
  23.               'Two点击了 ${logic.count} 次',
  24.               style: const TextStyle(fontSize: 30.0),
  25.             );
  26.           },
  27.         ),
  28.       ),
  29.     );
  30.   }
  31. }

页面2

  1. import 'package:get/get.dart';
  2. import 'package:get_x_demo/more_page_get/page_one_get/logic.dart';
  4. class PageTwoGetLogic extends GetxController {
  5.   final oneLogic = Get.put(PageOneGetLogic());
  6.   var count = 0;
  8.   @override
  9.   void onReady() {
  10.     count = oneLogic.count;
  11.     update();
  12.     super.onReady();
  13.   }
  15.   void increase() {
  16.     oneLogic.increase();
  17.     count = oneLogic.count;
  18.     update();
  19.   }
  20. }
  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  3. import 'package:get_x_demo/more_page_get/page_one_get/logic.dart';
  5. import 'logic.dart';
  7. class PageTwoGetPage extends StatelessWidget {
  8.   const PageTwoGetPage({Key? key}) : super(key: key);
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     final twoLogic = Get.put(PageTwoGetLogic());
  14.     return Scaffold(
  15.       backgroundColor: Colors.white,
  16.       appBar: AppBar(title: const Text('Two Page')),
  17.       floatingActionButton: FloatingActionButton(
  18.         onPressed: twoLogic.increase,
  19.         child: const Icon(Icons.add),
  20.       ),
  21.       body: Center(
  22.         child: GetBuilder<PageTwoGetLogic>(
  23.           builder: (logic) {
  24.             return Text(
  25.               '点击了 ${logic.count} 次',
  26.               style: const TextStyle(fontSize: 30.0),
  27.             );
  28.           },
  29.         ),
  30.       ),
  31.     );
  32.   }
  33. }

状态分离

划分三个结构：state（状态层），logic（逻辑层），view（界面层）

State

  1. class CountStateGetState {
  2.   late int count;
  4.   CountStateGetState() {
  5.     count = 0;
  6.   }
  7. }

logic

  1. import 'package:get/get.dart';
  3. import 'state.dart';
  5. class CountStateGetLogic extends GetxController {
  6.   final CountStateGetState state = CountStateGetState();
  8.   void increase() {
  9.     state.count = ++state.count;
  10.     update();
  11.   }
  13.   void remove() {
  14.     state.count = --state.count;
  15.     update();
  16.   }
  17. }

view

  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  4. import 'logic.dart';
  6. class CountStateGetPage extends StatelessWidget {
  7.   const CountStateGetPage({Key? key}) : super(key: key);
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     final logic = Get.put(CountStateGetLogic());
  12.     final state = Get.find<CountStateGetLogic>().state;
  13.     return Scaffold(
  14.       appBar: AppBar(
  15.         title: const Text("Count State Demo"),
  16.       ),
  17.       body: Center(
  18.         child: GetBuilder<CountStateGetLogic>(builder: (_) {
  19.           return Text(
  20.             state.count.toString(),
  21.             style: const TextStyle(fontSize: 30),
  22.           );
  23.         }),
  24.       ),
  25.       floatingActionButton: Column(
  26.         mainAxisSize: MainAxisSize.min,
  27.         children: [
  28.           FloatingActionButton(
  29.             heroTag: "add",
  30.             onPressed: logic.increase,
  31.             child: const Icon(Icons.add),
  32.           ),
  33.           const SizedBox(height: 10),
  34.           FloatingActionButton(
  35.             heroTag: "sub",
  36.             onPressed: logic.remove,
  37.             backgroundColor: Colors.red,
  38.             child: const Icon(Icons.remove),
  39.           )
  40.         ],
  41.       ),
  42.     );
  43.   }
  44. }
  • logic只专注于触发事件交互，state只专注数据。

Binding使用

可以统一管理复杂模块的多个GetXController。需要结合getx路由进行使用。

路由

  1. import 'package:get/get.dart';
  2. import 'package:get_x_demo/binding_demo/binding_one_page/binding.dart';
  3. import 'package:get_x_demo/binding_demo/binding_one_page/view.dart';
  4. import 'package:get_x_demo/binding_demo/binding_two_page/binding.dart';
  5. import 'package:get_x_demo/binding_demo/binding_two_page/view.dart';
  7. class RouteConfig {
  8.   static const String testOne = "/testOne";
  9.   static const String testTwo = "/testTwo";
  11.   static final List<GetPage> getPages = [
  12.     GetPage(
  13.       name: testOne,
  14.       page: () => const BindingOnePage(),
  15.       binding: BindingOnePageBinding(),
  16.     ),
  17.     GetPage(
  18.       name: testTwo,
  19.       page: () => const BindingTwoPage(),
  20.       binding: BindingTwoPageBinding(),
  21.     ),
  22.   ];
  23. }

Page One

  • Logic ```dart import ‘package:get/get.dart’; import ‘package:get_x_demo/binding_demo/route_config.dart’;

class BindingOnePageLogic extends GetxController { void toTwoPage() { Get.toNamed(RouteConfig.testTwo); } }

  2. - Binding
  3. ```dart
  4. import 'package:get/get.dart';
  6. import 'logic.dart';
  8. class BindingOnePageBinding extends Bindings {
  9.   @override
  10.   void dependencies() {
  11.     Get.lazyPut(() => BindingOnePageLogic());
  12.   }
  13. }
  • View ```dart import ‘package:flutter/material.dart’; import ‘package:get/get.dart’;

import ‘logic.dart’;

class BindingOnePage extends StatelessWidget { const BindingOnePage({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { final logic = Get.find(); return Scaffold( appBar: AppBar( title: const Text(“Binding Demo”), ), body: Center( child: ElevatedButton( onPressed: logic.toTwoPage, child: const Text(“跳转第二页”), ), ), ); } }

  1. <a name="Wsz84"></a>
  2. ### Page Two
  4. - Logic
  5. ```dart
  6. import 'package:get/get.dart';
  8. class BindingTwoPageLogic extends GetxController {
  9.   int count = 0;
  11.   void increase() {
  12.     count++;
  13.     update();
  14.   }
  16.   void remove() {
  17.     count--;
  18.     update();
  19.   }
  20. }
  • Binding ```dart import ‘package:get/get.dart’;

import ‘logic.dart’;

class BindingTwoPageBinding extends Bindings { @override void dependencies() { Get.lazyPut(() => BindingTwoPageLogic()); } }

  2. - View
  3. ```dart
  4. import 'package:flutter/material.dart';
  5. import 'package:get/get.dart';
  7. import 'logic.dart';
  9. class BindingTwoPage extends StatelessWidget {
  10.   const BindingTwoPage({Key? key}) : super(key: key);
  12.   @override
  13.   Widget build(BuildContext context) {
  14.     final logic = Get.find<BindingTwoPageLogic>();
  15.     return Scaffold(
  16.       appBar: AppBar(
  17.         title: const Text("Binding Two Page"),
  18.       ),
  19.       body: Center(
  20.         child: GetBuilder<BindingTwoPageLogic>(
  21.           assignId: true,
  22.           builder: (logic) {
  23.             return Text(
  24.               logic.count.toString(),
  25.             );
  26.           },
  27.         ),
  28.       ),
  29.       floatingActionButton: Column(
  30.         mainAxisSize: MainAxisSize.min,
  31.         children: [
  32.           FloatingActionButton(
  33.             heroTag: "add",
  34.             onPressed: logic.increase,
  35.             child: const Icon(Icons.add),
  36.           ),
  37.           const SizedBox(height: 10),
  38.           FloatingActionButton(
  39.             heroTag: "sub",
  40.             onPressed: logic.remove,
  41.             backgroundColor: Colors.red,
  42.             child: const Icon(Icons.remove),
  43.           )
  44.         ],
  45.       ),
  46.     );
  47.   }
  48. }

转载：Flutter GetX使用—-简洁的魅力！