Flutter一个轻量且强大的插件：GetX 之状态管理

GetX是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。GetX官方以低功能、高性能、低耦合为基本原则，以轻量级的方式，给开发者提供众多功能。

GetX所能提供的功能包括：状态管理、路由管理、依赖管理，提供如国际化、主题等等更多实用工具，今天我们来看下GetX 之状态管理。

对于状态管理器，Flutter官方提供有ChangeNotifier，可以使用它来通知更新widget，但它不宜使用太多，官方文档建议最多2个监听器，如果遇到比较大的项目，还是有点麻烦。

响应式编程很多框架都有应用，比如vue.js,这里Flutter中使用GetX插件可以让响应式编程编程很简便。通过计数器demo来看看。

在使用GetX之前，需要项目中集成它，添加到你的 pubspec.yaml 文件中。

代码语言：javascript复制

dependencies:
  get:

然后需要用到的地方导入

代码语言：javascript复制

import 'package:get/get.dart';

代码语言：javascript复制

void main() {
  runApp(
    GetMaterialApp(
      home: HomePage(), 
    ),
  );
}

代码语言：javascript复制

class Controller extends GetxController {
  var count = 0.obs;
  increment() => count  ;
}

留意到上面的0.obs,使用简单的.obs即可使任何变量成为可观察的。

使用Get.put()实例化业务类

代码语言：javascript复制

final Controller c = Get.put(Controller());

我们在页面导航中显示出计数器的值。

代码语言：javascript复制

AppBar(
    // 使用Obx(()=>每当改变计数时，就更新Text。
    title: Obx(() =>Text('Click:${c.count}')),
    elevation: 0.0,
),

按钮触发自增方法,每次count 1

代码语言：javascript复制

floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: c.increment,
),

这样每次点击按钮自增，导航标题数字会立马更新。详细的demo在可以在项目中的getx文件夹内，demo地址见文末。

多个页面同步更新显示计数器，只需要在另外的页面使用final Controller c = Get.find();即可找到一个正在被其他页面使用的Controler，同样在UI中，想显示该值并自动更新，使用

代码语言：javascript复制

Obx(() => Text("${c.count}"));

这样其他一个页面中修改了count，存在栈内的页面观察并显示了该变量的widget都会得到更新，同步显示最新结果。

下一篇带大家了解GetX的国际化，更多关于GetX的内容，后续会继续发出，Demo地址：https://github.com/Qson8/flutter_getx

0 人点赞