Flutter响应式状态管理

用户719312192340
131 阅读1分钟

GetBuilder手动管理状态

手动管理状态需要利用update() 通知指定GetBuilder更新视图
写一个计数器，计数增加时刷新页面\

代码示例：
logic.dart 文件(继承GetxController)

class GetCounterLogic extends GetxController {
  var count = 0;
  // 修改count时触发视图更新，用update()通知GetBuilder更新视图
  void increase() {
    ++count;
    update();
  }
}

view.dart 文件(注入逻辑和数据)

class GetCounterPage extends StatelessWidget {
    // 注入逻辑 和 数据
  final GetCounterLogic logic = Get.put(GetCounterLogic());
  @override
  Widget build(BuildContext context) {
    return BaseScaffold(
      appBar: AppBar(title: const Text('计数器')),
      body: Center(
        child: GetBuilder<GetCounterLogic>(builder: (logic) {
          return Text(
            '点击了 ${logic.count} 次',
            style: TextStyle(fontSize: 30.0),
          );
        }),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => logic.increase(),
        child: Icon(Icons.add),
      ),
    );
  }
}

核心思想是：将要响应式管理的组件放在GetBuilder里，controller通过调用update在数据改变时去更新视图(附盗图一张，原文链接：juejin.cn/post/690944…) image.png 它的原理是：

  1. GetBuilder是一个状态类(StatefulWidget)，它建立了和Controller的关系并在initState()时增加当前View作为监听者。
  2. Controller里维护了一个updater的列表记录每个监听者，在update()的时候会通知刷新所有View的状态。

GextX响应式管理状态

使用GetX管理响应式状态，只需在响应式变量后加.obs，通过obx组件，一旦这个对象的值发生了改变，就会刷新这些组件。
代码示例：
定义一个Controller类,Controller里包含多个以  .obs 的形式表示的变量，把这个变量称作为响应式变量。

class Controller extends GetXcontroller {
    final count1 = 0.obs;
    final count2 = 0.obs; 
    int get sum => count1.value + count2.value;
}

定义一个GetBuilder类：界面 - View 层，只要响应式变量发生改变，就会自动通知View刷新界面

class SimpleReactivePage extends StatelessWidget {
  SimpleReactivePage({Key? key}) : super(key: key);
  final Controller simpleController = Controller();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('响应式状态管理'),
      ),
      body: Center(
        child: Obx(
          () => Text('${sum}'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.refresh),
        onPressed: () {
          simpleController.count1+1;
        },
      ),
    );
  }
}

核心思想： image.png

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

  • Rx :

    • 是一个泛型类，用于将基本数据类型、集合或自定义对象转换为响应式变量。
    • 它提供了类型安全，因为你必须指定变量的类型。
    • 适用于需要明确变量类型的场景，有助于提高代码的可读性和健壮性。

  • .obs:

    • 是一个扩展方法，可以将几乎任何Dart对象转换成响应式对象。
    • 它非常灵活，但有时可能会牺牲类型安全。
    • 适用于快速原型开发或者当变量的类型非常明确，且不易出错的情况。

  • RxList :

    • 是专门用于创建响应式列表的类。
    • 它提供了列表操作的响应式版本，如添加、删除元素等，UI会自动响应这些变化。
    • 特别适用于当UI需要根据列表数据的变化动态更新时。
avatar
文章
阅读
粉丝