Flutter | 简单好用的弹窗队列

需求：

这是一个比较常见的需求：

进入app，有时有一堆的弹窗需要弹出来，什么活动弹窗啊，新用户福利弹窗啊，这些弹窗不能一次性全部弹出来，而是一个弹窗消失后下一个弹窗才弹出来。甚至，点击第一个弹窗进入详情页后，从详情页返回的时候，后面的弹窗才接着弹出来。

演示：

点击第一个弹窗进入详情页后，从详情页返回的时候，后面的弹窗才接着弹出来。

为了方便说明，就用弹出两个简单弹窗来阐述：

• 视频展示：

弹窗队列.gif

思路：

把任务放进队列。

“弹出弹窗” 视为一个任务，任务由队列控制，队列由我们控制。

现在 get 不到没关系，后面有完整 demo，你一定能可以理解。

代码：

• 队列代码：

仅三十多行代码。

import 'package:flutter/material.dart';

/// 弹窗队列管理
class DialogQueueManager {
  static bool _isNewQueue = true;
  static List<VoidCallback> _array = [];

  /// 入队
  static void enqueue(VoidCallback callback) {
    if (_isNewQueue) {
      _isNewQueue = false;
      callback();
    } else {
      _array.add(callback);
    }
  }

  /// 出队，返回出队是否成功
  static bool dequeue() {
    if (_array.isEmpty) {
      _isNewQueue = true;
      return false;
    } else {
      // 执行
      _array.first();
      // 删除
      _array.removeAt(0);
      _isNewQueue = _array.isEmpty;
      return true;
    }
  }

  static void clear() {
    _array = [];
    _isNewQueue = true;
  }
}

• demo 演示代码：

import 'package:flutter/material.dart';
import 'package:flutter_uikit/common/macro.dart';
import 'package:flutter_uikit/contents/dialog/dialog_queue/dialog_queue_manager.dart';

class DialogQueueDemoPage extends StatefulWidget {
  const DialogQueueDemoPage({Key? key}) : super(key: key);

  @override
  _DialogQueueDemoPageState createState() => _DialogQueueDemoPageState();
}

class _DialogQueueDemoPageState extends State<DialogQueueDemoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('弹窗队列')),
      body: Center(
        child: ElevatedButton(
          onPressed: _test,
          child: const Text('弹出多个弹窗'),
        ),
      ),
    );
  }

  void _test() {
    // 入队
    DialogQueueManager.enqueue(() {
      // 弹出弹窗1
      _showDialog1();
    });
    // 入队
    DialogQueueManager.enqueue(() {
      // 弹窗弹窗2
      _showDialog2();
    });
  }

  void _showDialog1() {
    showDialog(
      context: globalContext,
      builder: (context) {
        return Dialog(
          backgroundColor: Colors.orange,
          child: SizedBox(
            height: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('这是弹窗1'),
                ElevatedButton(
                  onPressed: () {
                    // 移除弹窗1
                    Navigator.pop(globalContext);
                    // 跳转到详情页
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => const _DetailPage()),
                    ).then((value) {
                      // 返回页面的时候才出队
                      // 此时弹窗队列的下一个任务执行
                      DialogQueueManager.dequeue();
                    });
                  },
                  child: const Text('查看详情'),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  void _showDialog2() {
    showDialog(
      context: globalContext,
      builder: (context) {
        return Dialog(
          backgroundColor: Colors.green,
          child: SizedBox(
            height: 200,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('这是弹窗2'),
                ElevatedButton(
                  onPressed: () {
                    Navigator.pop(globalContext);
                    // 出队
                    DialogQueueManager.dequeue();
                  },
                  child: const Text('确定'),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

/// 详情页
class _DetailPage extends StatelessWidget {
  const _DetailPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('这是弹窗1的详情页')),
    );
  }
}

秀在哪？

看完后你可能觉得很简单，如果是这样，说明你已经 get 到了。

这段代码它秀在秀在：放在队列里的是任务，代码表现上就是函数，而函数，可以是一切。

我给它命名为 DialogQueueManager，其实并不准确，因为它并不局限于弹窗队列，毕竟任务不仅仅可以是弹出弹窗，它可以是一切操作。它更适合的名字，应该是: TaskQueueManager。

这个类你可以拿到项目里直接用，它已经经过了两个项目的考验。你也可以改造它，让它更强大，为你更好的服务。

源码

https://github.com/CaiWanFeng/flutter-uikit

最后

本人擅长 iOS 和 Flutter，拥有多年开发经验，实战能力强，代码规范，注释清晰，欢迎技术交流与合作。