Oref 在 Dart/Flutter 中的安装与基本使用指南

安装

Oref 提供两个包：

名称	版本	描述
oref		响应式核心
oref_flutter		Oref 与 Flutter 的集成

我们使用下面命令进行安装：

Dart 项目

dart pub add oref

Flutter

flutter pub add oref_flutter

或者更新你的 pubspec.yaml 文件：

Dart 项目

dependencies:
  oref: latest

Flutter

dependencies:
  oref_flutter: latest

声明响应式状态

要声明一个响应式状态，我们使用 ref() 函数

Dart

final count = ref(0)

Flutter

final count = ref(context, 0)

ref() 接收参数，并返回一个包裹带有 .value 属性的 Ref<T> 对象：

Dart

void main() {
    final count = ref(0);

    print(count); // Ref<int>
    print(count.value); // 0

    count.value++;
    print(count.value); // 1
}

Flutter

class MyWidget extends StatelessWidget {
    const MyWidget({super.key});

    @override
    Widget build(BuildContext context) {
        final count = ref(context, 0); 

        return TextButton(
            onPressed: () => count.value++, 
            child: Text('Count: ${count.value}'), 
        );
    }
}

声明响应式集合

WIP

正在开发中，请阅读我们的路线图。

细粒度重建 Flutter

例如 声明响应式状态 例子中的 Counter 代码，当我们更新 count 的值的时候，整个 Counter Widget 都会重建。 这是没有意义的，因为我们只需要 Text 重建即可。

推荐使用 Observer Widget 来进行优化：

class Counter extends StatelessWidget {
    const Counter({super.key});

    @override
    Widget build(BuildContext context) {
        final count = ref(context, 0);

        return TextButton(
            onPressed: () => count.value++,
            child: Observer( 
                builder: (_) => Text('Count: ${count.value}'), 
            ), 
        );
    }
}

当 count 内部值更新的时候，就只会重建 Text 了。 不过 Observer 适合用于收集多个响应性值，对于简单的使用我们推荐 obs() 函数：

class Counter extends StatelessWidget {
    const Counter({super.key});

    @override
    Widget build(BuildContext context) {
        final count = ref(context, 0);

        return TextButton(
            onPressed: () => count.value++,
            child: count.obs((value) => Text('Count: ${value}')), 
        );
    }
}

TIP

有关 obs() 更多细节，请查看核心 → 可观测。

对于细粒度重建可以有多种实现方式：

• 使用 Observer 包装观测响应性数据
• 使用 obs() 进行观测。
• 使用 derived() - 派生 将值进行组合。