Flutter计算任务插件compute的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter计算任务插件compute的使用

简介

compute 包将Flutter的 compute 函数提取出来，使其可以在所有的Dart程序中使用。它为那些希望在独立的线程（isolate）中执行计算并使用计算结果的应用提供了一个方便的抽象层。

Continuous Integration compute Published by dartside.dev GitHub Stars Count

重要链接

如果你喜欢使用这个包，在 pub.dev 上点个赞会非常感谢！👍💙

动机

当你需要处理独立线程（isolate）时，正确地连接 SendPort 和 ReceivePort 需要编写大量的样板代码，而你可能只是想启动一个独立线程，进行一些计算，并使用计算结果。Flutter的 compute 函数是独立线程的一个非常有用的抽象，可以在各种类型的Dart应用程序中使用。不幸的是，对于不使用Flutter的Dart包来说，比如命令行和服务器端应用程序，Flutter的 compute 函数不可用。此包解决了这个问题，它从Flutter中提取了 compute 函数，并使其可以用于所有Dart项目。

注意事项

不要假设使用 compute 会自动加快你的代码：你应该对你的Dart应用程序进行基准测试，带 compute 和不带 compute 的情况下，只有当它确实能加速你的应用程序时才切换到使用 compute。需要注意的是，使用 compute 会失去直接使用独立线程的一些灵活性。此外，该包在Web上是安全的，但不会真正启动独立线程。更改与Flutter的稳定分支同步（目前是手动同步的）。

使用方法

Dart

这个包可以在任何地方工作，没有任何特定于Flutter的依赖关系。

import 'package:compute/compute.dart';

int square(int a) => a * a;

Future<void> main() async {
  final squared = await compute(square, 5);
  print('5^2=$squared');
}

Flutter

如果你在一个Flutter项目中，不需要这个包。这个包应该只在不能使用Flutter的 compute 函数的环境中使用。对于你的Flutter项目，直接使用Flutter的 foundation 中的 compute 函数。

完整示例Demo

下面是一个完整的示例，展示了如何在Dart项目中使用 compute 包来执行一个简单的计算任务：

import 'package:compute/compute.dart';

// 计算函数
int calculateSum(List<int> numbers) {
  return numbers.reduce((a, b) => a + b);
}

void main() async {
  // 创建一个包含数字的列表
  List<int> numbers = List.generate(1000000, (index) => index + 1);

  // 使用compute函数在独立线程中执行计算
  int sum = await compute(calculateSum, numbers);

  // 打印结果
  print('The sum of the first 1,000,000 positive integers is $sum');
}

在这个例子中，我们定义了一个名为 calculateSum 的函数，它接收一个整数列表并返回这些数字的总和。然后我们在 main 函数中创建了一个包含1到1,000,000的整数列表，并使用 compute 函数在独立线程中执行 calculateSum 函数。最后，我们打印出计算的结果。

通过这种方式，你可以轻松地在Dart项目中利用多线程的优势，提高应用程序的性能。


更多关于Flutter计算任务插件compute的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter计算任务插件compute的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，compute 函数是一个用于在后台线程上执行耗时计算任务的有用工具。它允许你在不阻塞UI线程的情况下执行密集型计算任务，从而提升应用的性能和响应性。

compute 函数接受两个参数：一个函数（表示要执行的任务）和一个参数（传递给该函数的输入数据）。它返回一个 Future，该 Future 将在计算完成后解析为结果。

以下是一个使用 compute 函数执行计算任务的简单示例。假设我们有一个计算两个整数之和的任务：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Compute Example'),
        ),
        body: ComputeExample(),
      ),
    );
  }
}

class ComputeExample extends StatefulWidget {
  @override
  _ComputeExampleState createState() => _ComputeExampleState();
}

class _ComputeExampleState extends State<ComputeExample> {
  String result = 'Press the button to compute';

  void _computeSum() async {
    // Define the computation task
    int a = 1000000;
    int b = 2000000;
    int sum = await compute(_sum, a, b);

    // Update the UI with the result
    setState(() {
      result = 'The sum is: $sum';
    });
  }

  // The function to be executed on a background thread
  static int _sum(int a, int b) {
    // Simulate a heavy computation by adding a delay
    // In a real-world scenario, this would be the actual computation logic
    Dart.sleep(Duration(seconds: 2)); // Note: Dart.sleep is used here for demonstration purposes only. In a real app, you would not block the background thread like this.
    return a + b;
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(result),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _computeSum,
            child: Text('Compute Sum'),
          ),
        ],
      ),
    );
  }
}

解释

  1. 主函数和 MaterialApp:

    • main 函数启动 Flutter 应用并运行 MyApp 小部件。
    • MyApp 小部件构建了一个基本的 Material 应用，其中包含一个 Scaffold，Scaffold 包含一个 AppBar 和一个 ComputeExample 小部件。

  2. ComputeExample 小部件:

    • ComputeExample 是一个有状态的小部件，它包含一个字符串 result，用于显示计算结果。
    • _computeSum 方法使用 compute 函数在后台线程上执行 _sum 函数。
    • _sum 函数模拟了一个耗时的计算任务（通过 Dart.sleep 延迟 2 秒）。在实际应用中，这里会放置实际的计算逻辑。
    • 当计算完成后，_computeSum 方法使用 setState 更新 UI，显示计算结果。

  3. UI 构建:

    • build 方法返回一个包含文本和按钮的列，按钮点击时调用 _computeSum 方法。

注意

  • 在实际应用中，尽量避免在后台线程中使用阻塞操作（如 Dart.sleep），因为这可能会浪费计算资源并影响性能。
  • compute 函数适用于在后台线程上执行纯函数（即没有副作用的函数）。如果你的计算任务依赖于或修改全局状态，请考虑使用其他并发模式（如 Isolates）。

希望这个示例能帮助你理解如何在 Flutter 中使用 compute 函数来执行后台计算任务。

回到顶部