Flutter可取消操作插件cancelable的使用

在某些情况下，我们需要能够取消正在进行的操作。例如，在网络请求或长时间运行的任务中，我们可能希望在用户离开页面时取消这些操作。Cancelable插件可以帮助我们实现这一功能。

使用

首先，我们需要创建一个Cancelable对象：

final cancelable = Cancelable();

然后，我们可以使用whenCancel方法来指定在取消操作时要执行的回调函数。这个回调函数通常用于清理资源或取消正在进行的操作：

final disposable = cancelable.whenCancel(() {
    // 在这里取消你的操作
});

接下来，你可以执行一些操作。如果需要取消这些操作，可以调用cancelable.cancel()方法：

// 执行一些操作
doSomething();

// 取消操作
cancelable.cancel();

处理取消后的清理

当你不再需要disposable对象时，应该调用其dispose方法以释放相关资源：

disposable.dispose();

完整示例Demo

以下是一个完整的示例，展示了如何使用Cancelable插件来取消操作：

import 'package:flutter/material.dart';
import 'package:cancelable/cancelable.dart'; // 假设你已经添加了cancelable包

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Cancelable Demo')),
        body: Center(child: CancelableExample()),
      ),
    );
  }
}

class CancelableExample extends StatefulWidget {
  [@override](/user/override)
  _CancelableExampleState createState() => _CancelableExampleState();
}

class _CancelableExampleState extends State<CancelableExample> {
  final cancelable = Cancelable();
  String status = "等待操作";

  [@override](/user/override)
  void dispose() {
    // 清理资源
    cancelable.cancel();
    cancelable.whenCancel(() {}).dispose();
    super.dispose();
  }

  void startOperation() async {
    setState(() {
      status = "开始操作";
    });

    final disposable = cancelable.whenCancel(() {
      setState(() {
        status = "操作已取消";
      });
    });

    try {
      // 模拟长时间操作
      await Future.delayed(Duration(seconds: 5));
      setState(() {
        status = "操作完成";
      });
    } catch (e) {
      setState(() {
        status = "操作失败";
      });
    } finally {
      disposable.dispose();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: startOperation,
          child: Text("开始操作"),
        ),
        SizedBox(height: 20),
        Text(status),
      ],
    );
  }
}

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

gougou168 1楼•4 天前

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

当然，以下是如何在Flutter中使用cancelable操作的示例代码。假设我们有一个可取消的计时器操作，当计时器运行时，用户可以取消它。我们可以使用Future和Completer来实现这一点。虽然Flutter本身没有一个直接的cancelable插件，但我们可以创建一个自定义的cancelable操作。

首先，我们需要一个CancelableOperation类，这个类可以开始一个操作并提供一个取消操作的方法。

import 'dart:async';

class CancelableOperation {
  private Completer<void> _completer = Completer<void>();
  private Timer? _timer;

  Future<void> get future => _completer.future;

  void start(int durationInSeconds) {
    _timer = Timer(Duration(seconds: durationInSeconds), () {
      _completer.complete();
    });
  }

  void cancel() {
    _timer?.cancel();
    _completer.completeError(CancelError("Operation was canceled"));
  }
}

class CancelError extends Error {
  String cause;
  CancelError(this.cause);
}

然后，我们可以在Flutter的UI中使用这个类。以下是一个完整的Flutter应用示例，它启动一个可取消的计时器，并在用户点击按钮时取消它。

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

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

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

class CancelableOperationScreen extends StatefulWidget {
  @override
  _CancelableOperationScreenState createState() => _CancelableOperationScreenState();
}

class _CancelableOperationScreenState extends State<CancelableOperationScreen> {
  CancelableOperation? _cancelableOperation;
  bool _isRunning = false;
  String _status = "Operation not started";

  void _startOperation() {
    setState(() {
      _isRunning = true;
      _status = "Operation started...";
    });

    _cancelableOperation = CancelableOperation();
    _cancelableOperation!.future.then((_) {
      setState(() {
        _isRunning = false;
        _status = "Operation completed";
      });
    }).catchError((error) {
      if (error is CancelError) {
        setState(() {
          _isRunning = false;
          _status = error.cause;
        });
      } else {
        setState(() {
          _isRunning = false;
          _status = "An error occurred: ${error.message}";
        });
      }
    });

    _cancelableOperation!.start(5); // 5 seconds for demonstration
  }

  void _cancelOperation() {
    if (_cancelableOperation != null) {
      _cancelableOperation!.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cancelable Operation Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _status,
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            if (_isRunning)
              ElevatedButton(
                onPressed: _cancelOperation,
                child: Text('Cancel Operation'),
              )
            else
              ElevatedButton(
                onPressed: _startOperation,
                child: Text('Start Operation'),
              ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个CancelableOperation类，它接受一个持续时间并开始一个计时器。如果计时器完成，它会完成Future。如果调用cancel方法，计时器会被取消，并且Future会以CancelError错误完成。

在Flutter UI中，我们有两个按钮：“Start Operation”和“Cancel Operation”（在计时器运行时显示）。点击“Start Operation”按钮开始计时器，点击“Cancel Operation”按钮取消计时器。

这个示例展示了如何在Flutter中实现一个可取消的操作，并处理操作的完成和取消。