GetX 响应式状态管理简介

作者：岛上码农

2022 年 6 月 19 日
本文字数：1690 字
阅读完需：约 6 分钟

前言

我们用了几章讲述了 GetX 的简单状态响应管理，本篇开始来讲解 GetX 的响应式状态管理。关于响应式状态管理，GetX 官方文档提到了具有如下优点：

无需创建 StreamController；
无需为每个变量创建 StreamBuilder；
无需为每个状态创建一个类；
无需为一个初始值创建一个 get 方法；
使用 GetX 响应式编程非常简单，就像使用 setState 一样。

反正吹牛不需要上税，但是是不是真的这么好用（GetX 也不是像作者那样吹的那么完美，GetX 讲完之后，我们介绍一篇国外吐槽 GetX 的文章），我们得跑几个例子看看才知道。

监测变量

GetX 的监测变量非常简单，只需要在定义的时候假设.obs 即可，例如：

var name = '岛上码农'.obs;

复制代码

这里面到底怎么实现的呢？在 GetX 中为 String对象创建了一个 Stream，赋予了初始值，然后会通知所有使用该对象的 Widget。一旦这个对象的值发生了改变，就会刷新这些组件。这是通过 Obx 组件实现的，下面是一个简单的示例``。

class SimpleReactiveController extends GetxController {  final _name = ' 岛上码农'.obs;  set name(value) => this._name.value = value;  get name => this._name.value;}
class SimpleReactivePage extends StatelessWidget {  SimpleReactivePage({Key? key}) : super(key: key);  final SimpleReactiveController simpleController = SimpleReactiveController();
  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('响应式状态管理'),      ),      body: Center(        child: Obx(          () => Text('${simpleController.name}'),        ),      ),      floatingActionButton: FloatingActionButton(        child: Icon(Icons.refresh),        onPressed: () {          simpleController.name = 'island-coder';        },      ),    );  }}

复制代码

这里和setState有个区别，GetX 扩展的.obs 用法内部做了是否相等的比较，如果更新操作前后的对象是相等的话，那么不会通知组件刷新，从而提高性能。对于一个Controller拥有多个对象的时候，当这些对象发生改变的时候，也只会更新那些依赖这些对象的组件，而不是所有依赖 Controller 的组件。

声明状态对象的方法

在 GetX 的响应式状态管理中，有三种方式声明状态变量，在 GetX 中这些状态变量统一称之为 Rx 变量。

方式一：Rx{Type}

即在基本的类型中假设 Rx 前缀，初始值可以设置，但推荐是给对象初始值（对于 null safety 版本，必须要提供初始值）。

final name = RxString('');final isLogged = RxBool(false);final count = RxInt(0);final balance = RxDouble(0.0);final items = RxList<String>([]);final myMap = RxMap<String, int>({});

复制代码

方式二：Rx 泛型

使用泛型的范围更广，可以将任何类转为 Rx 变量，包括自定义类型。

final name = Rx<String>('');final isLogged = Rx<Bool>(false);final count = Rx<Int>(0);final balance = Rx<Double>(0.0);final number = Rx<Num>(0);final items = Rx<List<String>>([]);final myMap = Rx<Map<String, int>>({});
// 自定义类final user = Rx<User>();

复制代码

方式三：.obs 扩展

使用.obs 扩展更使用也更简洁，对于需要监测的对象来说，加上.obs扩展即可。

final name = ''.obs;final isLogged = false.obs;final count = 0.obs;final balance = 0.0.obs;final number = 0.obs;final items = <String>[].obs;final myMap = <String, int>{}.obs;
// 自定义类final user = User().obs;

复制代码

在视图中使用 Rx 变量

有两种方式在视图中使用 Rx 变量，一种是上面我们说的使用 Obx 组件，还有一种方式是使用 GetX<T>组件，如下所示：

//方式一Obx(() => Text('${simpleController.name}'),),
// 方式二GetX<SimpleReactiveController>(  builder: (controller) => Text('${simpleController.name}'),  init: simpleController,),

复制代码

总结

本篇介绍了 GetX 的响应式状态管理的基本概念和用法，相比GetBuilder这种简单的方式而言，响应式还有很多更高级的用法，我们接下来的篇章会继续介绍。

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/6b639612ff74578216bbff776】。文章转载请联系作者。

岛上码农

关注

用代码连接孤岛，公众号@岛上码农 2022.03.03 加入

从南漂到北，从北漂到南的业余码农

发布

暂无评论

创作场景

GetX 响应式状态管理简介

前言

监测变量

声明状态对象的方法

方式一：Rx{Type}

方式二：Rx 泛型

方式三：.obs 扩展

在视图中使用 Rx 变量

总结

岛上码农

评论