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

相关推荐
Cao_Shixin攻城狮3 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter
人生游戏牛马NPC1号11 小时前
学习 Flutter (四):玩安卓项目实战 - 中
android·学习·flutter
YueYaTech14 小时前
【Flutter 必备插件】屏幕适配方案 flutter_screenutil
flutter
耳東陈15 小时前
【重磅发布】Flutter 生态首个可商用 K线图表库flutter_chen_kchart
flutter
程序员老刘16 小时前
AI智能体正在颠覆App开发,不转型就淘汰
flutter·客户端·mcp
worxfr17 小时前
Flutter 入门指南:从基础到实战
flutter
yuanlaile17 小时前
Flutter Android打包学习指南
android·flutter·flutter打包·flutter android
0wioiw019 小时前
Flutter基础(前端教程①①-底部导航栏)
flutter
sunly_1 天前
Flutter:上传图片,选择相机或相册:wechat_assets_picker
数码相机·flutter·微信
_Shirley1 天前
安卓开发使用Android Studio配置flutter环境
android·flutter·android studio