千家信息网

Flutter和Dart取消Future的方法有哪些

发表于:2025-01-16 作者:千家信息网编辑
千家信息网最后更新 2025年01月16日,这篇文章主要介绍"Flutter和Dart取消Future的方法有哪些",在日常操作中,相信很多人在Flutter和Dart取消Future的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好
千家信息网最后更新 2025年01月16日Flutter和Dart取消Future的方法有哪些

这篇文章主要介绍"Flutter和Dart取消Future的方法有哪些",在日常操作中,相信很多人在Flutter和Dart取消Future的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"Flutter和Dart取消Future的方法有哪些"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

    使用异步包(推荐)

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

    var myCancelableFuture = CancelableOperation.fromFuture(  Future inner,   { FutureOr onCancel()? })// call the cancel() method to cancel the futuremyCancelableFuture.cancel();

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

    完整示例

    应用预览

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

    • 如果您在Future完成前 5 秒内点击取消按钮,屏幕将显示"Future已被取消"。

    • 如果您什么都不做,则 5 秒后屏幕将显示"Future completed"。

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

    代码

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

    flutter pub add async

    然后运行:

    flutter pub get

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

    // main.dartimport '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 {  // this future will return some text once it completes  Future _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 timeout(   Duration timeLimit,  {FutureOr onTimeout()?})

    快速示例

    创建一个虚拟的Future:

    Future _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 thisimport 'dart:async';// Create a demo futureFuture _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() laterStreamSubscription? _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和Dart取消Future的方法有哪些"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

    0