Flutter任务队列管理插件flutter_queue_it的使用

简介

flutter_queue_it 是一个用于在 Flutter 应用中集成队列管理的插件。它提供了 QueueItWidget 小部件，可以监听队列的变化并自动重建。

示例

以下是一个完整的示例，展示了如何使用 flutter_queue_it 插件来管理任务队列。

import 'dart:async';
import 'dart:developer';
import 'dart:math' as math;

import 'package:queue_it/queue_it.dart';
import 'package:faker/faker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_queue_it/flutter_queue_it.dart';

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatefulWidget {
  const ExampleApp({super.key});

  [@override](/user/override)
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  final _queue = QueueIt<String>(
    parallel: 3,
    retries: 3,
    useFriendlyIds: true,
    itemHandler: (item) async {
      log('Processing item: $item');

      /// 生成一个介于0.5到2秒之间的持续时间
      final duration = Duration(
        milliseconds: (500 + (math.Random().nextInt(1500))).toInt(),
      );

      await Future.delayed(duration);
    },
  )..onUpdate.listen(
      (snapshot) {
        String message;
        if (snapshot.eventItem != null) {
          message = snapshot.eventItem!.summaryTableLine;
        } else {
          message = snapshot.event.name;
        }
        log(message, name: 'QueueIt');
      },
    );

  final _faker = Faker();

  [@override](/user/override)
  void dispose() {
    _queue.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: QueueItWidget(
        queue: _queue,
        builder: (context, snapshot) {
          final items = _queue.items();
          return Scaffold(
            appBar: AppBar(
              title: const Text('队列管理'),
            ),
            floatingActionButtonLocation:
                FloatingActionButtonLocation.centerDocked,
            floatingActionButton: Padding(
              padding: const EdgeInsets.all(18.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  /// 如果队列已启动，则显示取消按钮
                  if (_queue.isStarted)
                    FloatingActionButton(
                      onPressed: () {
                        _queue.stop();
                      },
                      tooltip: '取消队列',
                      backgroundColor: Colors.red,
                      child: const Icon(Icons.stop),
                    )

                  /// 如果队列已处理完成，则显示完成按钮
                  else if (_queue.items().pending.isEmpty && _queue.items().isNotEmpty)
                    FloatingActionButton(
                      backgroundColor: Colors.green,
                      onPressed: () {
                        _queue.removeAll();
                      },
                      child: const Icon(Icons.check),
                    )

                  /// 如果队列未启动，则显示开始按钮
                  else
                    FloatingActionButton(
                      onPressed: () {
                        _queue.start();
                      },
                      tooltip: '开始队列',
                      backgroundColor: Colors.green,
                      child: const Icon(Icons.play_arrow),
                    ),

                  /// 添加图像按钮
                  FloatingActionButton(
                    onPressed: () {
                      _addImage(
                        _faker.image.image(random: true),
                      );
                    },
                    tooltip: '添加图像',
                    child: const Icon(Icons.add),
                  ),
                ],
              ),
            ),
            body: Column(
              mainAxisSize: MainAxisSize.max,
              children: [
                /// 进度条
                if (_queue.items().processing.isNotEmpty)
                  LinearProgressIndicator(
                    value: _queue.items().progress,
                  ),

                /// 队列列表
                Expanded(
                  child: items.isEmpty
                      ? const Center(child: Text('队列中无项目'))
                      : ListView.builder(
                          padding: const EdgeInsets.only(bottom: 100),
                          itemCount: items.length,
                          itemBuilder: (context, index) {
                            final item = items.toList()[index];
                            return Dismissible(
                              key: Key(item.data),
                              onDismissed: (direction) {
                                _queue.remove(item);
                              },
                              child: ListTile(
                                leading: Image.network(item.data),
                                title: Text(item.data),
                                subtitle: Wrap(
                                  children: [
                                    if (item.queuedAt != null)
                                      Text('添加时间: ${item.queuedAt}'),
                                    if (item.startedProcessingAt != null)
                                      Text('开始时间: ${item.startedProcessingAt}'),
                                    if (item.completedAt != null)
                                      Text('完成时间: ${item.completedAt}'),
                                    if (item.failedAt != null)
                                      Text('失败时间: ${item.failedAt}'),
                                  ],
                                ),
                                trailing: _iconFromStatus(item.status),
                              ),
                            );
                          },
                        ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  void _addImage(String imageUrl) {
    _queue.add(imageUrl);
  }

  /// 根据项目的状态返回相应的图标
  Icon _iconFromStatus(QueueItemStatus status) {
    switch (status) {
      case QueueItemStatus.pending:
        return const Icon(Icons.timer);
      case QueueItemStatus.processing:
        return const Icon(Icons.hourglass_top);
      case QueueItemStatus.completed:
        return const Icon(Icons.check);
      case QueueItemStatus.failed:
        return const Icon(Icons.error);
      case QueueItemStatus.canceled:
        return const Icon(Icons.cancel);

      /// 未使用的状态
      case QueueItemStatus.removed:
        return const Icon(Icons.delete);
    }
  }
}

更多关于Flutter任务队列管理插件flutter_queue_it的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 1楼•3 天前

更多关于Flutter任务队列管理插件flutter_queue_it的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用flutter_queue_it插件进行任务队列管理的示例代码。flutter_queue_it是一个用于管理异步任务队列的Flutter插件，可以帮助你轻松实现任务排队、任务执行、任务取消等功能。

首先，确保你已经在pubspec.yaml文件中添加了flutter_queue_it依赖：

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

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

接下来是一个简单的使用示例：

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

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

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

class QueueDemoPage extends StatefulWidget {
  @override
  _QueueDemoPageState createState() => _QueueDemoPageState();
}

class _QueueDemoPageState extends State<QueueDemoPage> {
  final QueueController _queueController = QueueController();

  @override
  void initState() {
    super.initState();
    // 初始化队列控制器并监听状态变化
    _queueController.listen((QueueStatus status) {
      print('Queue Status: $status');
    });
  }

  @override
  void dispose() {
    // 释放资源
    _queueController.dispose();
    super.dispose();
  }

  void _addTask() {
    // 添加一个模拟任务到队列
    _queueController.enqueue(() async {
      await Future.delayed(Duration(seconds: 2));
      print('Task completed');
    });
  }

  void _startQueue() {
    // 开始处理队列中的任务
    _queueController.start();
  }

  void _stopQueue() {
    // 停止处理队列中的任务
    _queueController.stop();
  }

  void _clearQueue() {
    // 清空队列中的所有任务
    _queueController.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Queue It Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _addTask,
              child: Text('Add Task'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _startQueue,
              child: Text('Start Queue'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _stopQueue,
              child: Text('Stop Queue'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _clearQueue,
              child: Text('Clear Queue'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含以下功能：

添加任务：点击“Add Task”按钮，将一个模拟任务（延迟2秒完成的任务）添加到队列中。
启动队列：点击“Start Queue”按钮，开始处理队列中的任务。
停止队列：点击“Stop Queue”按钮，停止处理队列中的任务（注意，已启动的任务会继续执行，但新的任务不会开始）。
清空队列：点击“Clear Queue”按钮，清空队列中的所有任务。

QueueController是flutter_queue_it插件的核心类，用于管理任务队列的状态和生命周期。通过监听QueueController的状态变化，你可以实时了解队列的状态（如空闲、运行中、已停止等）。

希望这个示例能帮你更好地理解如何使用flutter_queue_it插件进行任务队列管理。如果有任何进一步的问题或需求，请随时提出！