当前位置：首页 > news >正文

Flutter 弹窗队列管理：支持优先级的线程安全通用弹窗队列系统

news 来源：原创 2025/4/26 6:10:20

在复杂的 Flutter 应用开发中，弹窗管理是一个常见难题。手动管理弹窗的显示顺序和条件判断不仅繁琐，还容易出错。为此，我们实现了一个支持优先级的线程安全通用弹窗队列管理系统。它能够自动管理弹窗的显示顺序，支持条件判断，并且可以灵活地在任何地方调用。

一、需求分析

支持弹窗队列：按顺序显示多个弹窗。
条件判断：弹窗显示前可进行条件判断。
线程安全：确保在多线程环境下操作安全。
通用性：可在任何地方调用，不限于 StatefulWidget。
优先级支持：支持弹窗优先级，高优先级弹窗优先显示。

二、实现思路

单例模式：全局只有一个队列管理实例。
线程安全：使用 synchronized 包确保操作安全。
优先级排序：弹窗按优先级排序，高优先级先显示。
独立函数：提供独立的 showQueueDialog 函数，方便调用。

三、代码实现

1. 弹窗队列管理类

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:synchronized/synchronized.dart';const _defaultTag = 'default_dialog_queue_tag';typedef BSQueueDialogCondition = FutureOr<bool> Function(BuildContext context);
typedef BSQueueDialogShow = FutureOr<void> Function(BuildContext context);class BSQueueDialog {final BSQueueDialogCondition? shouldShow;final BSQueueDialogShow show;final int priority; // 弹窗优先级const BSQueueDialog({this.shouldShow,required this.show,this.priority = 0, // 默认优先级为0});
}class DialogQueueManager {static final DialogQueueManager _instance = DialogQueueManager._internal();factory DialogQueueManager() => _instance;DialogQueueManager._internal();final _dialogQueue = <String, List<BSQueueDialog>>{};final _displayingDialog = <String, BSQueueDialog>{};final _lock = Lock();Future<void> showQueueDialog<R>({required BuildContext context,BSQueueDialogCondition? shouldShow,required BSQueueDialogShow show,String tag = _defaultTag,int priority = 0, // 弹窗优先级}) async {final dialog = BSQueueDialog(shouldShow: shouldShow, show: show, priority: priority);await _lock.synchronized(() async {var queue = _dialogQueue[tag];if (queue == null) {queue = <BSQueueDialog>[];_dialogQueue[tag] = queue;}queue.add(dialog);// 按优先级排序队列，高优先级在前queue.sort((a, b) => b.priority.compareTo(a.priority));final displayingDialog = _displayingDialog[tag];if (displayingDialog == null) {_displayingDialog[tag] = dialog;await _showQueueDialog(tag, context);}});}Future<void> _showQueueDialog(String tag, BuildContext context) async {while (true) {await _lock.synchronized(() async {final queue = _dialogQueue[tag];if (queue == null || queue.isEmpty) {_dialogQueue.remove(tag);_displayingDialog.remove(tag);return;}final dialog = queue.removeAt(0);if (!mounted) return;final shouldShow = await dialog.shouldShow?.call(context) ?? false;if (!mounted) return;if (mounted && shouldShow) {_displayingDialog[tag] = dialog;} else {return; // 如果不应该显示，则直接返回}});if (!mounted) return;await dialog.show(context);await _lock.synchronized(() {_displayingDialog.remove(tag);});}}
}

2. 独立的 `showQueueDialog` 函数

Future<void> showQueueDialog<R>({required BuildContext context,BSQueueDialogCondition? shouldShow,required BSQueueDialogShow show,String tag = _defaultTag,int priority = 0, // 弹窗优先级
}) async {return DialogQueueManager().showQueueDialog(context: context,shouldShow: shouldShow,show: show,tag: tag,priority: priority,);
}

3. 使用示例

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Queue Dialog Example',home: MyHomePage(),);}
}class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Queue Dialog Example'),),body: Center(child: ElevatedButton(onPressed: () {showQueueDialog(context: context,shouldShow: (context) async {// 可以在这里添加条件逻辑return true;},show: (context) async {await showDialog(context: context,builder: (context) => AlertDialog(title: Text('Queue Dialog'),content: Text('This is a queued dialog with priority.'),actions: [TextButton(onPressed: () => Navigator.pop(context),child: Text('Close'),),],),);},priority: 1, // 设置弹窗优先级);},child: Text('Show Queue Dialog'),),),);}
}