详解Flutter和Dart取消Future的三种方法


Posted in Java/Android onApril 07, 2022

使用异步包(推荐)

async包由 Dart 编程语言的作者开发和发布。它提供了dart:async风格的实用程序来增强异步计算。可以帮助我们取消Future的是CancelableOperation类:

var myCancelableFuture = CancelableOperation.fromFuture(
  Future<T> inner, 
  { FutureOr onCancel()? }
)
​
// call the cancel() method to cancel the future
myCancelableFuture.cancel();

为了更清楚,请参阅下面的实际示例。

完整示例

应用预览

详解Flutter和Dart取消Future的三种方法

我们要构建的应用程序有一个浮动按钮。按下此按钮时,将开始异步操作(这需要 5 秒才能完成)。按钮的背景从靛蓝变为红色,其标签从“开始”变为“取消”,现在您可以使用它来取消Future。

  • 如果您在Future完成前 5 秒内点击取消按钮,屏幕将显示“Future已被取消”。
  • 如果您什么都不做,则 5 秒后屏幕将显示“Future completed”。

一个演示价值超过一千字:

代码

1.通过执行以下操作安装异步包:

flutter pub add async

然后运行:

flutter pub get

2.main.dart 中的完整源代码(附解释):

// main.dart
import 'package:flutter/material.dart';
import 'package:async/async.dart';
​
void main() {
  runApp(const MyApp());
}
​
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: '大前端之旅',
        theme: ThemeData(
          primarySwatch: Colors.indigo,
        ),
        home: const HomePage());
  }
}
​
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
​
  @override
  _HomePageState createState() => _HomePageState();
}
​
class _HomePageState extends State<HomePage> {
  // this future will return some text once it completes
  Future<String?> _myFuture() async {
    await Future.delayed(const Duration(seconds: 5));
    return 'Future completed';
  }
​
  // keep a reference to CancelableOperation
  CancelableOperation? _myCancelableFuture;
​
  // This is the result returned by the future
  String? _text;
​
  // Help you know whether the app is "loading" or not
  bool _isLoading = false;
​
  // This function is called when the "start" button is pressed
  void _getData() async {
    setState(() {
      _isLoading = true;
    });
​
    _myCancelableFuture = CancelableOperation.fromFuture(
      _myFuture(),
      onCancel: () => 'Future has been canceld',
    );
    final value = await _myCancelableFuture?.value;
​
    // update the UI
    setState(() {
      _text = value;
      _isLoading = false;
    });
  }
​
  // this function is called when the "cancel" button is tapped
  void _cancelFuture() async {
    final result = await _myCancelableFuture?.cancel();
    setState(() {
      _text = result;
      _isLoading = false;
    });
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('大前端之旅')),
      body: Center(
        child: _isLoading
            ? const CircularProgressIndicator()
            : Text(
                _text ?? 'Press Start Button',
                style: const TextStyle(fontSize: 28),
              ),
      ),
      // This button is used to trigger _getDate() and _cancelFuture() functions
      // the function is called depends on the _isLoading variable
      floatingActionButton: ElevatedButton(
        onPressed: () => _isLoading ? _cancelFuture() : _getData(),
        child: Text(_isLoading ? 'Cancel' : 'Start'),
        style: ElevatedButton.styleFrom(
            padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 30),
            primary: _isLoading ? Colors.red : Colors.indigo),
      ),
    );
  }
}

使用 timeout() 方法

这种方法既快速又简单。但是,它不是很灵活。

使用timeout()方法,您可以限制Future的时间(例如 3 秒)。如果 future 及时完成,它的值将被返回。另一方面,如果Future超过限制时间,将执行onTimeout函数:

Future<T> timeout(
   Duration timeLimit,
  {FutureOr<T> onTimeout()?}
)

快速示例

创建一个虚拟的Future:

Future<String?> _myFuture() async {
    await Future.delayed(const Duration(seconds: 10));
    return 'Future completed';
}

设置超时 3 秒:

_myFuture().timeout(
      const Duration(seconds: 3),
      onTimeout: () =>
          'The process took too much time to finish. Please try again later',
);

将Future转换为流

您可以使用 Future 类的asStream()方法来创建一个包含原始Future结果的流。现在您可以取消对该流的订阅。

快速示例

// don't forget to import this
import 'dart:async';
​
// Create a demo future
Future<dynamic> _loadData() async {
    await Future.delayed(const Duration(seconds: 10));
    return 'Some Data';
}
​
// a reference to the stream subscription
// so that we can call _sub.cancel() later
StreamSubscription<dynamic>? _sub;
​
// convert the future to a stream
_sub = _loadData().asStream().listen((data) {
    // do something with "data"
    print(data);
 });
​
// cancel the stream subscription
_sub.cancel();

请注意,这个快速示例仅简要描述了事物的工作原理。您必须对其进行修改以使其可在现有项目中运行。

结论

你已经学会了不止一种方法来取消 Flutter 中的Future。从其中选择一个以在您的应用程序中实现,以使其在处理异步任务时更加健壮和吸引人。

以上就是详解Flutter和Dart取消Future的三种方法的详细内容,更多关于Flutter Dart取消Future的资料请关注三水点靠木其它相关文章!

Java/Android 相关文章推荐
详解Java实现设计模式之责任链模式
Jun 23 Java/Android
分析JVM源码之Thread.interrupt系统级别线程打断
Jun 29 Java/Android
Java Socket实现多人聊天系统
Jul 15 Java/Android
spring boot中nativeQuery的用法
Jul 26 Java/Android
dubbo服务整合zipkin详解
Jul 26 Java/Android
一篇文章带你学习Mybatis-Plus(新手入门)
Aug 02 Java/Android
Android Rxjava3 使用场景详解
Apr 07 Java/Android
解决Springboot PostMapping无法获取数据的问题
May 06 Java/Android
springboot读取resources下文件的方式详解
Jun 21 Java/Android
Java Spring Boot请求方式与请求映射过程分析
Jun 25 Java/Android
基于Android10渲染Surface的创建过程
Aug 14 Java/Android
Android移动应用开发指南之六种布局详解
Sep 23 Java/Android
java如何实现获取客户端ip地址的示例代码
Apr 07 #Java/Android
Android Flutter实现3D动画效果示例详解
Apr 07 #Java/Android
Android Flutter实现图片滑动切换效果
MyBatis配置文件解析与MyBatis实例演示
Java 深入探究讲解简单工厂模式
springboot用户数据修改的详细实现
Apr 06 #Java/Android
Java中API的使用方法详情
You might like
php 表单验证实现代码
2009/03/10 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
利用Python爬取可用的代理IP
2016/08/18 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
python的json包位置及用法总结
2020/06/21 Python
python 实现逻辑回归
2020/12/30 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
应用化学专业职业生涯规划书
2013/12/31 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
师德师风个人反思
2014/04/28 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js