Flutter响应式计算插件computed_flutter的使用

简介

computed_flutter 是一个用于在 Flutter 中实现响应式计算的插件。它允许你将 Computed 与 Flutter 特定的功能（如 Widget 和 Listenable）结合起来。

目录

• 如何使用
• 使用Computed与小部件
  • 使用 Computed[Stateful]Widget
  • 使用 ComputedFlutter[Stateful]Mixin
  • 使用 ComputedBuilder
• 摄入数据源
• 使用计算结果

如何使用

假设你有一个数据源，例如一个表示外部状态的 ValueListenable<int>：

ValueListenable<int> v;

你希望你的用户界面能够与这个外部状态保持同步。假设你简单地想显示外部状态的值，你可以使用 Computed 实现这一点，而无需编写多余的代码：

Text('${v.use}')

请注意，这不使用代码生成，也不限制你的代码库中每个对象类型最多只有一个数据源。

使用Computed与小部件

使用 Computed 提供的功能（如 .use 和 .react）在小部件的 build 方法中需要 Computed 意识这些方法的存在。你可以通过以下几种方式实现这一点：

使用 Computed[Stateful]Widget

如果你有一个自定义的小部件，继承自 StatelessWidget 或 StatefulWidget，可以修改它们以继承自 ComputedWidget 或 ComputedStatefulWidget：

class MyWidget extends ComputedWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 这实际上是在运行一个计算
    return Text('${v.use}'); // 当 [v] 发生变化时自动重新运行
  }
}

使用 ComputedFlutter[Stateful]Mixin

如果你不想让你的小部件继承自 Computed[Stateful]Widget，可能是因为它们已经继承了其他类，你可以使用混入：

class MyWidget extends MyOtherWidget with ComputedFlutterMixin {
  ...
}

class MyStatefulWidget extends MyOtherStatefulWidget with ComputedFlutterStatefulMixin {
  ...
}

使用 ComputedBuilder

如果你正在使用一个无法修改定义的小部件，或者希望限制反应性小部件重建的范围，可以使用 ComputedBuilder：

ComputedBuilder(builder: (BuildContext context) => 
  ExternalWidget(v.use)
)

摄入数据源

Computed Flutter 支持通过 .use 反应性地依赖于 ValueListenable，就像 Computed 一样：

ValueListenable<int> v;

final c = $((){
    v.use; // 反应性地依赖于 [v]
});

要依赖于 Listenable 的更改，你可以使用 .watch：

class MyListenable implements Listenable {
  int get value => ...;
  ...
}

MyListenable l;

final c = $((){
    l.watch.value; // 反应性地依赖于 [l]
});

使用计算结果

Computed Flutter 允许你将计算结果转换为 Listenable 和 ValueListenable：

final c = $(() => ...); // 一个计算

c.asListenable; // 返回一个 [ComputedListenable]
c.asValueListenable; // 返回一个 [ValueListenable]

当然，还可以使用其他基于基础 Computed 包定义的方法。为了方便引用，这包括 .use, .listen 和 .asStream。

完整示例

以下是一个完整的示例，展示了如何使用 computed_flutter 插件来创建一个简单的计数器应用：

import 'package:computed_flutter/computed_flutter.dart';
import 'package:flutter/material.dart';

final count = ValueNotifier(0);

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Computed Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

// 注意，与普通的计数器应用不同，这个小部件是无状态的
class MyHomePage extends ComputedWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Computed Flutter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text('${count.use}', style: Theme.of(context).textTheme.headlineMedium),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => count.value++,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}