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

·  阅读 387

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

图片.png

推荐: Flutter一个轻量且强大的插件:GetX 之路由管理

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

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

响应式状态管理器

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

集成插件

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

dependencies:
  get:
复制代码

然后需要用到的地方导入

import 'package:get/get.dart';
复制代码
GetX的计数器
  • 在你的MaterialApp前加上 "Get",把它变成GetMaterialApp,因需要使用GetX的路由管理,所以做这一步。
void main() {
  runApp(
    GetMaterialApp(
      home: HomePage(), 
    ),
  );
}
复制代码
  • 创建Controller作为业务逻辑类
class Controller extends GetxController {
  var count = 0.obs;
  increment() => count++;
}

复制代码

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

  • 创建计数器页面

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

final Controller c = Get.put(Controller());
复制代码

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

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

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

floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: c.increment,
),
复制代码

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

图片.png

  • 多个页面同步更新显示计数器,只需要在另外的页面使用final Controller c = Get.find();即可找到一个正在被其他页面使用的Controler,同样在UI中,想显示该值并自动更新,使用
Obx(() => Text("${c.count}"));
复制代码

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

下一篇带大家了解GetX的国际化,更多关于GetX的内容,后续会继续发出,Demo地址:github.com/Qson8/flutt… 欢迎关注公众号:Hi Flutter

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改