Flutter 簡單實現順序彈窗

前言

在公司的專案使用BotToast執行彈窗功能,用起來很舒服很全面。

然而隨著產品迭代更新,功能越加越多,開始出現彈窗的互頂與互蓋,最多曾遇到6個彈窗同時疊在一塊,四周背景陰影疊得烏漆麻黑。

此時讓彈窗按順序彈出就顯得格外重要了。

思路

說到按順序,那就是先進先出概念的Queue,需要一個array,可以直接使用List。

需要一個函式執行Push,負責放入彈窗到隊列尾端中。

需要一個函式執行Pop,負責將隊列頭部的彈窗移除。

最後還需要一個函式負責在上述兩個動作後,執行隊列在頭部的彈窗。

實現

基本內容:

Dart 复制代码
List popupQueue = [];

_push(Function f) {
  popupQueue.add(f);
  // 唯一彈窗直接執行
  if (popupQueue.length == 1) _check();
}

_pop() {
  if (popupQueue.isEmpty) return;
  popupQueue.removeAt(0);
  // 執行下一個彈窗
  _check();
}

_check() {
  if (popupQueue.isEmpty) return;
  popupQueue.first();
}

結合BotToast:

Dart 复制代码
showAnimationWidget() {
  _push((){
    BotToast.showAnimationWidget(... onClose: _pop);
  });
}

升級:彈窗優先度

基本雙等級

可以分成兩個Queue代表不同等級 直接上code

dart 复制代码
List popupLowQueue = [];
List popupHighQueue = [];

_pushLow(Function f) {
  popupLowQueue.add(f);
  // 唯一彈窗直接執行
  if (popupLowQueue.length + popupHighQueue.length == 1) _check();
}

_pushHigh(Function f) {
  popupHighQueue.add(f);
  // 唯一彈窗直接執行
  if (popupLowQueue.length + popupHighQueue.length == 1) _check();
}

_popLow() {
  if (popupLowQueue.isEmpty) return;
  popupLowQueue.removeAt(0);
  // 執行下一個彈窗
  _check();
}

_popHigh() {
  if (popupHighQueue.isEmpty) return;
  popupHighQueue.removeAt(0);
  // 執行下一個彈窗
  _check();
}

_check() {
  // 優先執行高等級
  if (popupHighQueue.isNotEmpty) {
    popupHighQueue.first();
    return;
  }
  if (popupLowQueue.isEmpty) return;
  popupLowQueue.first();
}

popupLowLevel() {
  _pushLow(() {
    BotToast.showSimpleNotification(
      title: "low",
      onClose: _popLow,
    );
  });
}

popupHighLevel() {
  _pushHigh(() {
    BotToast.showSimpleNotification(
      title: "high",
      onClose: _popHigh,
    );
  });
}

然而這種做法,等級一旦多了,會顯得非常麻煩與混亂。

多等級優先度

使用Map包裝彈窗function並標上等級,通過等級比較決定順序。

dart 复制代码
List popupQueue = [];

_push(Map map) {
  // 唯一彈窗直接執行
  if (popupQueue.isEmpty) {
    popupQueue.add(map);
    _check();
    return;
  }

  // 比較等級 插入
  for (int i = 1; i < popupQueue.length; i++) {
    if(map["level"] > popupQueue[i]["level"]){
      popupQueue.insert(i, map);
      return;
    }
  }

  // 等級最低末端加入
  popupQueue.add(map);
}

_popLow() {
  if (popupQueue.isEmpty) return;
  popupQueue.removeAt(0);
  // 執行下一個彈窗
  _check();
}

_check() {
  if (popupQueue.isEmpty) return;
  popupQueue.first["popup"]();
}

popupLevel(int level) {
  Map map = {
    "level": level,
    "popup": () {
      BotToast.showSimpleNotification(
        title: "$level",
        onClose: _popLow,
      );
    },
  };

  _push(map);
}

最後

此文為簡單實現,歡迎大家分享更好更高效的方法!

附上 GitHub

相关推荐
九丝城主1 天前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware
瓜子三百克1 天前
七、性能优化
flutter·性能优化
恋猫de小郭2 天前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
小蜜蜂嗡嗡2 天前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克2 天前
十、高级概念
flutter
帅次3 天前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡3 天前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉3 天前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian1233 天前
FlutterView 源码解析
flutter
Zender Han3 天前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter