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

相关推荐
大雷神14 小时前
Flutter鸿蒙开发
flutter·华为·harmonyos
shelutai18 小时前
实现提供了完整的 Flutter Web 文件上传解决方案
前端·flutter
小仙女喂得猪20 小时前
2025 Android原生开发者角度的Flutter 笔记整理(对比ReactNative)
android·flutter·react native
猪哥帅过吴彦祖20 小时前
Flutter 系列教程:列表与网格 - `ListView` 和 `GridView`
前端·flutter·ios
程序员老刘2 天前
为什么我从不推荐GetX?11k星标背后的真相
flutter·客户端
dragon7252 天前
flutter riverpod原理浅析
flutter
恋猫de小郭2 天前
深入理解 Flutter 的 PlatformView 如何在鸿蒙平台实现混合开发
android·前端·flutter
浅蓝色2 天前
flutter平台判断后续
flutter·harmonyos
猪哥帅过吴彦祖2 天前
Flutter 系列教程:常用基础组件 (下) - `TextField` 和 `Form`
前端·flutter·ios
我想吃辣条2 天前
flutter google play 应用不支持 16 KB
android·flutter