Flutter异步任务执行插件async_executor的使用

Flutter 异步任务执行插件 async_executor 的使用

Async Executor 是一个工具,允许你执行任何异步函数,并处理加载过程和错误捕获,同时使用标准弹窗。

示例

以下是一个完整的示例代码,展示了如何在 Flutter 应用中使用 async_executor 插件。

import 'dart:developer';

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

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Async Executor Demo',
      theme: ThemeData(
        // 这是你应用的主题。
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final AsyncExecutor normal = AsyncExecutor();
  final AsyncExecutor custom = AsyncExecutor(
    loadingMessage: (BuildContext context) async {
      await showDialog(
        context: context,
        barrierDismissible: false,
        builder: (context) {
          return WillPopScope(
            onWillPop: () async => false,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Material(
                  color: Colors.transparent,
                  child: Container(
                    height: 60,
                    child: Center(
                      child: CircularProgressIndicator(
                        backgroundColor: Colors.green,
                      ),
                    ),
                  ),
                )
              ],
            ),
          );
        },
      );
    },
    errorMessage: (
      BuildContext context,
      dynamic error,
    ) async {
      return await showDialog(
        context: context,
        builder: (dialogContext) {
          return AlertDialog(
            title: Text("错误"),
            content: Text(
              "$error",
              style: TextStyle(color: Colors.red),
            ),
            actions: [
              TextButton(
                child: Text("确定"),
                onPressed: () {
                  Navigator.pop(dialogContext);
                },
              )
            ],
          );
        },
      );
    },
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Async Executor Demo'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          ElevatedButton(
            onPressed: () {
              normal.run(
                  context: context,
                  onExecute: () async {
                    await Future.delayed(Duration(seconds: 3));
                  },
                  onFinish: (dynamic value) {
                    log("on finish");
                  });
            },
            child: Text("正常模式"),
          ),
          ElevatedButton(
            onPressed: () {
              normal.run(
                  context: context,
                  onExecute: () async {
                    await Future.delayed(Duration(seconds: 3));
                    throw Exception("异常");
                  },
                  onFinish: (dynamic value) {
                    log("on finish");
                  });
            },
            child: Text("正常模式带错误"),
          ),
          ElevatedButton(
            onPressed: () {
              custom.run(
                  context: context,
                  onExecute: () async {
                    await Future.delayed(Duration(seconds: 3));
                  },
                  onFinish: (dynamic value) {
                    log("on finish");
                  });
            },
            child: Text("自定义模式"),
          ),
          ElevatedButton(
            onPressed: () {
              custom.run(
                  context: context,
                  onExecute: () async {
                    await Future.delayed(Duration(seconds: 3));
                    throw Exception("异常");
                  },
                  onFinish: (dynamic value) {
                    log("on finish");
                  });
            },
            child: Text("自定义模式带错误"),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter异步任务执行插件async_executor的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然,async_executor 插件在 Flutter 中用于方便地管理异步任务。下面是一个如何使用 async_executor 插件的示例代码案例。

首先,确保在你的 pubspec.yaml 文件中添加 async_executor 依赖:

dependencies:
  flutter:
    sdk: flutter
  async_executor: ^最新版本号  # 请替换为实际的最新版本号

然后运行 flutter pub get 来获取依赖。

接下来,在你的 Flutter 应用中使用 async_executor。以下是一个简单的示例,展示了如何执行和管理异步任务。

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final AsyncExecutor _asyncExecutor = AsyncExecutor();
  String _result = 'No Result Yet';
  bool _isLoading = false;

  @override
  void dispose() {
    // 清理资源
    _asyncExecutor.dispose();
    super.dispose();
  }

  Future<String> _fetchData() async {
    // 模拟一个耗时操作,例如网络请求
    await Future.delayed(Duration(seconds: 2));
    return 'Data Loaded Successfully';
  }

  void _executeTask() {
    setState(() {
      _isLoading = true;
    });

    _asyncExecutor.execute(_fetchData()).then((result) {
      setState(() {
        _result = result;
        _isLoading = false;
      });
    }).catchError((error) {
      setState(() {
        _result = 'Error: $error';
        _isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Async Executor Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _result,
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            CircularProgressIndicator(
              visibility: _isLoading ? Visibility.visible : Visibility.collapsed,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _executeTask,
              child: Text('Execute Async Task'),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖管理:在 pubspec.yaml 文件中添加 async_executor 依赖。
  2. 状态管理:在 _MyHomePageState 类中管理异步任务的状态,包括加载结果和加载状态。
  3. 异步任务:定义一个 _fetchData 方法来模拟一个耗时操作(例如网络请求)。
  4. 任务执行:使用 _asyncExecutor.execute 方法来执行异步任务,并在任务完成后更新 UI。
  5. 错误处理:在 then 方法后使用 catchError 来处理可能出现的错误。
  6. UI 更新:根据异步任务的状态(加载中、成功、失败)更新 UI。

这个示例展示了如何使用 async_executor 插件来执行和管理异步任务,并在任务完成后更新 UI。希望这个示例代码对你有所帮助!

回到顶部