flutter使用getx进行数据状态管理,实现页面响应式

无论是什么样的应用,都还是需要最基础的数据来支撑的,而且不同的页面之间可能需要共享数据状态,这就显得数据状态管理非常有必要了。因为我这里使用了get依赖库,所以就可以直接在项目中使用getx来管理状态,不想再使用别的框架了。而且getx使用起来也挺方便的。

在flutter中文网里面还是有许多状态管理依赖库推荐的:状态 (State) 管理参考 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

但是我这里就讲一下getx的使用,很简单,三步就可以完成使用。

get依赖包地址:get | Flutter Package

添加get依赖

在pubspec.yaml文件中添加所需要的第三方依赖库:

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  get: ^4.6.6

创建store

在项目目录下面创建stores文件夹,用来管理全局的数据状态,可以通过分类将不同的状态封装在不同的dart文件中:

例如user.dart源代码:

Dart 复制代码
import 'package:get/get.dart';

class UserInfo extends GetxController {
  // 用户名字
  var name = "".obs;

  // 用户密码
  var passwd = "".obs;

  // 用户年龄
  var age = 0.obs;

  // 用户权限
  var power = [].obs;

  // 以下为周期函数
  @override
  void onInit() {
    print('onInit');
    super.onInit();
  }

  @override
  void onClose() {
    // 控制器绑定在路由上的话,路由销毁则触发
    print('onClose');
    super.onClose();
  }

  @override
  void onReady() {
    print('onReady');
    super.onReady();
  }

  // 增加状态管理的数值
  void addAge() {
    age.value++;
    update(); // 调用obx更新数据,不然数据不会更新
  }

  // 减少状态管理的数值
  void setName(String val) {
    name.value = val;
    update();
  }

  // 修改用户密码
  void setPasswd(String pw) {
    passwd.value = pw;
    update();
  }

  // 配置用户权限
  void addPower(pws) {
    var pwsTemp = [...power, ...pws];
    power.value = pwsTemp;
  }

  // 清空状态数据
  void clear() {
    name.value = "";
    passwd.value = "";
    age.value = 0;
    power.value = [];
  }
}

在页面中引用

在main.dart中使用GetMaterialApp创建的app才可以哦,使用后就可以到页面中引入并使用了,直接使用即可,注意需要引入get:

Dart 复制代码
import 'package:get/get.dart';


UserInfo user = Get.put(UserInfo());

如果想在页面中使用这个状态数据:

Dart 复制代码
Obx(() => Text("${user.age}")),

想要点击按钮设置里面的值:直接调用里面的方法就好

Dart 复制代码
            ElevatedButton(
                onPressed: () {
                  print("添加Powers");
                  user.addPower([10]);
                },
                child: Text("添加Power:10")),

比如我在登录页面添加用户名和密码,到首页就可以看到我的那些数据:

首页展示数据:

相关推荐
Summer不秃3 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰3 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
sunly_3 小时前
Flutter:AnimatedSwitcher当子元素改变时,触发动画
flutter
AiFlutter3 小时前
Flutter封装Coap
flutter
旭日猎鹰9 小时前
Flutter踩坑记录(三)-- 更改入口执行文件
flutter
旭日猎鹰9 小时前
Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行
flutter
️ 邪神9 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
比格丽巴格丽抱20 小时前
flutter项目苹果编译运行打包上线
flutter·ios
SoaringHeart20 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
AiFlutter1 天前
Flutter通过 Coap发送组播
flutter