Flutter GetX使用

这篇具有很好参考价值的文章主要介绍了Flutter GetX使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

下载地址：
https://pub-web.flutter-io.cn/packages/get

导入依赖：

dependencies:
  get: ^4.6.5

导入头文件：

import 'package:get/get.dart';

使用 Obx() 、 GetX<T>()

创建全局数据 Counter，继承 GetxController：

class Counter extends GetxController {
  /// 在使用GetX时，我们必须通过在值的末尾添加以下内容使变量可被观察到 **obs**在值的末尾加上然后，
  /// 当变量发生变化时，应用程序中依赖它的其他部分将得到通知。
  var count = 0.obs; // 等同于 RxInt count = 0.obs;

  increment() => count.value++;
}

添加依赖：

  /// 注入依赖
  Counter controller = Get.put(Counter());

添加组件 Obx() ，监听显示数据：

/// 监听数据： Obx 返回一个组件
Obx(
	() => Text('您点击了${controller.count}次'),
),

/// GetX<T>() 等同于 Obx()
GetX<Counter>(
	builder: (_) {
	return Text('您点击了${_.count}次');
	},
),

改变数据：

/// 改变数据
controller.increment();

使用 GetBuilder<T>()

创建全局数据 MyController 继承 GetxController ：

class MyController extends GetxController {
  var number = 0;

  add() {
    number++;
    update();// 监听数据更新
  }
}

添加依赖：

  MyController controller = Get.put(MyController());

添加组件 GetBuilder<T> :

              GetBuilder<MyController>(
                  init: controller,
                  initState: (_) {},
                  dispose: (state) {},
                  builder: (_) {
                    return Column(
                      children: [
                        Text('您点击了${_.number}次'),
                        ElevatedButton(
                          child: const Text("Click"),
                          /// 改变数据
                          onPressed: () => _.add(),
                        ),
                      ],
                    );
                  },
                ),

使用 ValueBuilder<T?>

                /// ValueBuilder 监听数据
                ValueBuilder<int?>(
                  initialValue: 0,
                  onDispose: () {},
                  onUpdate: (p0) => print("$p0"),
                  builder: (value, updater) {
                    return Column(
                      children: [
                        Text('您点击了$value次'),
                        ElevatedButton(
                          child: const Text("Click"),
                          onPressed: () {
                            value = (value ?? 0) + 1;
                            updater(value);//更新数据
                          },
                        ),
                      ],
                    );
                  },
                ),

在添加的依赖是全局的，考虑到内存释放问题，在页面deposit的时候需要释放controller

  @override
  void dispose() {
    super.dispose();
    /// 清除单例数据
    Get.delete<MyController>();
  }

如果需要到下一个页面访问该数据，需要使用 Get.find<T>() 函数：

MyController controller = Get.find<MyController>();

数据监听展示：

               GetBuilder(
                  init: controller,
                  builder: (_) {
                    return Column(
                      children: [
                        Text("${controller.number}"),
                        ElevatedButton(
                          child: const Text("Click"),
                          onPressed: () {
                            _.add();// 更新数据，上个页面的数据也会随之改变！！！
                          },
                        ),
                      ],
                    );
                  },
                )

此时会出现一个问题，就是如果想创建两个同类型的model（即 runtimeType 相同）需要如何区分呢？这时需要用到 tag 参数，主要下面三个函数：

/// 添加依赖
MyController controller = Get.put(MyController(), tag: "one");
MyController controller = Get.put(MyController(), tag: "two");

/// 访问数据
MyController controller = Get.find<MyController>(tag: "one");
MyController controller = Get.find<MyController>(tag: "two");

/// 删除数据
Get.delete<MyController>(tag: "one");
Get.delete<MyController>(tag: "two");

上述主要用到 GetX 的状态管理功能，如果想使用它的路由管理功能需要将 MaterialApp 改为 GetMaterialApp，这时候是不需要 content 的，例如页面 push ：文章来源地址https://www.toymoban.com/news/detail-567147.html