Flutter可取消计算任务插件cancelable_compute的使用

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

Flutter可取消计算任务插件 cancelable_compute 的使用

简介

cancelable_compute 是一个基于 Flutter 的计算操作插件，支持在计算过程中取消任务。该插件可以用于执行长时间运行的任务，并在需要时取消这些任务。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  cancelable_compute: ^latest_version

请将 latest_version 替换为最新版本号，可以在 pub.dev 上查看。

使用示例

基本用法

以下是一个简单的使用示例，展示了如何使用 cancelable_compute 插件来执行一个计算任务并在需要时取消它。

import 'package:cancelable_compute/cancelable_compute.dart';

// 计算斐波那契数列
int fib(int n) {
  if (n < 2) {
    return n;
  }
  return fib(n - 2) + fib(n - 1);
}

// 延迟计算斐波那契数列
Future<int> delayed(int n) async {
  await Future<void>.delayed(Duration(seconds: n ~/ 2));
  return fib(n);
}

Future<void> main() async {
  // 创建一个计算任务
  final operation = compute(delayed, 4);

  // 在 1 秒后取消任务
  Future<void>.delayed(Duration(seconds: 1), () {
    operation.cancel(-1);
  });

  // 获取计算结果
  final result = await operation.value;
  print(result ?? -1); // 如果任务被取消，result 将为 -1
}

解释

  1. 定义计算函数：

    • fib 函数用于计算斐波那契数列。
    • delayed 函数用于延迟计算斐波那契数列，模拟长时间运行的任务。

  2. 创建计算任务：

    • 使用 compute 方法创建一个计算任务，传入 delayed 函数和参数 4。

  3. 取消任务：

    • 使用 Future.delayed 方法在 1 秒后调用 operation.cancel(-1) 来取消任务。-1 是取消任务时返回的值。

  4. 获取结果：

    • 使用 await operation.value 获取计算结果。如果任务被取消，result 将为 -1。

注意事项

  • Web 平台：在 Web 平台上，取消操作不会停止正在运行的未来任务。因此，取消操作可能不会立即生效。

特性和问题

如果有任何功能请求或发现 bug，请在 GitHub 仓库 中提交 issue。

许可证

cancelable_compute 采用 MIT 许可证。

希望这个示例能帮助你更好地理解和使用 cancelable_compute 插件。如果你有任何问题或建议，请随时提出！


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用cancelable_compute插件来执行可取消计算任务的示例代码。cancelable_compute插件允许你在Flutter应用中执行长时间运行的任务，并且能够随时取消这些任务。

首先，你需要在你的pubspec.yaml文件中添加cancelable_compute依赖：

dependencies:
  flutter:
    sdk: flutter
  cancelable_compute: ^x.y.z  # 替换为最新的版本号

然后运行flutter pub get来安装依赖。

接下来是一个简单的示例，展示如何使用cancelable_compute来执行一个可取消的计算任务：

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

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

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

class CancelableComputeScreen extends StatefulWidget {
  @override
  _CancelableComputeScreenState createState() => _CancelableComputeScreenState();
}

class _CancelableComputeScreenState extends State<CancelableComputeScreen> {
  CancelableComputeTask? _task;
  bool _isRunning = false;
  String _result = '';

  void _startTask() async {
    setState(() {
      _isRunning = true;
      _result = '';
    });

    _task = CancelableCompute.run(() async {
      for (int i = 0; i <= 10; i++) {
        if (await CancelableCompute.isCancelled) {
          print('Task was cancelled');
          return 'Cancelled';
        }

        await Future.delayed(Duration(seconds: 1)); // Simulate a long-running task
        print('Progress: $i');
      }

      return 'Completed';
    });

    String? result = await _task!.result;
    setState(() {
      _isRunning = false;
      _result = result ?? 'Unknown';
    });
  }

  void _cancelTask() {
    if (_task != null) {
      _task!.cancel();
      setState(() {
        _isRunning = false;
        _result = 'Cancelled';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cancelable Compute Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Result: $_result',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _isRunning ? null : _startTask,
              child: Text('Start Task'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: _isRunning ? _cancelTask : null,
              child: Text('Cancel Task'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖安装：在pubspec.yaml中添加cancelable_compute依赖。

  2. UI布局：

    • 使用MaterialApp和Scaffold创建基本的Flutter应用布局。
    • 使用Center和Column将按钮和文本居中对齐。

  3. 状态管理：

    • 使用StatefulWidget和_CancelableComputeScreenState来管理UI的状态。
    • _task存储当前的CancelableComputeTask。
    • _isRunning表示任务是否正在运行。
    • _result存储任务的结果。

  4. 启动任务：

    • _startTask方法启动一个新的计算任务。
    • 使用CancelableCompute.run来运行异步计算任务。
    • 在任务中，定期检查CancelableCompute.isCancelled来决定是否继续执行。

  5. 取消任务：

    • _cancelTask方法取消当前的任务。
    • 更新UI以反映任务已被取消。

这个示例展示了如何使用cancelable_compute插件来创建和管理可取消的计算任务，希望对你有帮助！

回到顶部