Flutter计算逻辑封装插件computables的使用

当然，computables 是一个用于在 Flutter 中封装计算逻辑的插件。它允许你将复杂的计算逻辑从 UI 代码中分离出来，从而使代码更加清晰和可维护。以下是一个使用 computables 插件的简单示例，展示如何封装计算逻辑并在 Flutter 应用中使用它。

首先，确保你已经在 pubspec.yaml 文件中添加了 computables 依赖：

dependencies:
  flutter:
    sdk: flutter
  computables: ^latest_version  # 替换为最新版本号

然后运行 flutter pub get 来获取依赖。

1. 创建一个 Computable 类

创建一个 Dart 文件（例如 calculations.dart），在其中定义你的计算逻辑。这里我们创建一个简单的加法运算作为示例：

import 'package:computables/computables.dart';

class AdditionComputable extends Computable<int, int, int> {
  @override
  Result<int> compute(int a, int b, [VoidCallback? invalidate]) {
    return Result(a + b);
  }
}

2. 在 Flutter Widget 中使用 Computable

在你的 Flutter 应用中，你可以使用这个 AdditionComputable 类来进行计算。下面是一个简单的示例，展示如何在 MyHomePage 中使用这个封装好的计算逻辑：

import 'package:flutter/material.dart';
import 'package:computables/computables.dart';
import 'calculations.dart';  // 导入我们之前创建的 calculations.dart 文件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final AdditionComputable _addition = AdditionComputable();
  int? _result;
  int _num1 = 0;
  int _num2 = 0;

  void _updateResult() {
    setState(() {
      _result = _addition(_num1, _num2);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Computables Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              decoration: InputDecoration(labelText: 'Number 1'),
              keyboardType: TextInputType.number,
              onChanged: (value) {
                _num1 = int.tryParse(value) ?? 0;
                _updateResult();
              },
            ),
            SizedBox(height: 16),
            TextField(
              decoration: InputDecoration(labelText: 'Number 2'),
              keyboardType: TextInputType.number,
              onChanged: (value) {
                _num2 = int.tryParse(value) ?? 0;
                _updateResult();
              },
            ),
            SizedBox(height: 16),
            Text(
              'Result: $_result',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

解释

1. 定义 Computable 类：

   • AdditionComputable 类继承自 Computable<int, int, int>，表示它接受两个 int 类型的参数并返回一个 int 类型的结果。
   • compute 方法实现了加法运算。

2. 在 Flutter Widget 中使用：

   • _MyHomePageState 类中创建了一个 AdditionComputable 实例 _addition。
   • 使用两个 TextField 控件来输入两个数字，并在输入变化时更新这两个数字。
   • _updateResult 方法调用 _addition 实例，并更新 _result。
   • Text 控件显示计算结果。

通过这种方式，你可以将复杂的计算逻辑从 UI 代码中分离出来，使得代码更加清晰和模块化。computables 插件非常适合用于需要频繁更新计算结果的应用场景。