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

Flutter弹窗链-顺序弹出对话框

效果

前言

弹窗的顺序执行在App中是一个比较常见的应用场景。比如进入App首页,一系列的弹窗就会弹出。如果不做处理就会导致弹窗堆积的全部弹出,严重影响用户体验。

如果多个弹窗中又有判断逻辑,根据点击后需要弹出另一个弹窗,这个弹窗优先级更高,需要在当前弹出框关闭后弹出,又添加了复杂度了,所以才会有需要管理多个弹窗的展示需求。

实现

  • 采用方式是拦截器法
/// 源码:https://github.com/yixiaolunhui/flutter_xy
/// 链式拦截器。
abstract class ChainInterceptor {/// 拦截器执行方法。void intercept(ChainHandler chain);
}/// 链
abstract class Chain {/// 将拦截器添加到链中。/// 如果提供了 [index],则在指定的索引处添加拦截器。/// 否则,将拦截器添加到链的末尾。void addChain(ChainInterceptor interceptor, {int? index});/// 执行链void proceed();
}/// 链状态监听器。
abstract class ChainStatusListener {/// 当链状态发生变化时调用。/// [isChainEnd] 表示链是否已经执行完毕。void onStatusChange(bool isChainEnd);
}/// 构建和执行链帮助类
class ChainHelper {static Builder builder() {return Builder();}
}/// 用于构建链的构建器类。
class Builder {final ChainHandler _chainHandler = ChainHandler();/// 将拦截器添加到链中。////// 如果提供了 [index],则在指定的索引处添加拦截器。/// 否则,将拦截器添加到链的末尾。Builder addChain(ChainInterceptor interceptor, {int? index}) {_chainHandler.addChain(interceptor, index: index);return this;}/// 设置链的状态监听器。Builder setChainStatusListener(ChainStatusListener chainStatusListener) {_chainHandler.setChainStatusListener(chainStatusListener);return this;}/// 获取 [ChainManager] 实例。ChainHandler get chainHandler => _chainHandler;/// 执行链。void execute() {_chainHandler.proceed();}
}/// 链管理类
class ChainHandler implements Chain {final _chains = <ChainInterceptor>[];int _index = 0;ChainStatusListener? _statusListener;/// 设置链的状态监听器。void setChainStatusListener(ChainStatusListener chainStatusListener) {_statusListener = chainStatusListener;}/// 将拦截器添加到链中。////// 如果提供了 [index],则在指定的索引处添加拦截器。/// 否则,将拦截器添加到链的末尾。@overridevoid addChain(ChainInterceptor interceptor, {int? index}) {if (index != null) {_chains.insert(index, interceptor);} else {_chains.add(interceptor);}}/// 获取链中拦截器的数量。int getChainCount() => _chains.length;/// 当前索引int get currentIndex => _index;/// 执行链。////// 通知 [ChainStatusListener] 链状态的变化。/// 如果链已经执行完毕,则清空链。@overridevoid proceed() {bool isChainEnd = _index >= _chains.length;_statusListener?.onStatusChange(isChainEnd);if (isChainEnd) {clear();return;}_chains[_index++].intercept(this);}/// 清空链void clear() {_chains.clear();_index = 0;}
}

使用

  • 定义多个弹出框
/// 源码:https://github.com/yixiaolunhui/flutter_xy
///第1个弹窗
class OneDialog implements ChainInterceptor {@overridevoid intercept(ChainHandler chain) {showDialog(builder: (BuildContext context) {return AlertDialog(title: const Text('第1个弹出框'),content: const Text('这个是一个弹出框的内容文案'),actions: [TextButton(onPressed: () {Navigator.pop(context);chain.proceed();},child: const Text('取消'),),TextButton(onPressed: () {Navigator.pop(context);chain.proceed();},child: const Text('确认'),),],);},context: App.get().context,);}
}///第2个弹窗
class TwoDialog implements ChainInterceptor {@overridevoid intercept(ChainHandler chain) {showDialog(context: App.get().context,builder: (BuildContext context) {return AlertDialog(title: const Text('第2个弹出框'),content: const Text('这个是一个弹出框的内容文案'),actions: [TextButton(onPressed: () {Navigator.pop(context);chain.proceed();},child: const Text('取消'),),TextButton(onPressed: () {Navigator.pop(context);//这里模拟插入新的弹出框,一般场景是点击按钮后,请求网络然后需要弹出新的弹出框chain.addChain(OtherDialog(), index: chain.currentIndex);chain.proceed();},child: const Text('添加其他弹出框'),),],);},);}
}///第3个弹窗
class ThreeDialog implements ChainInterceptor {@overridevoid intercept(ChainHandler chain) {showDialog(context: App.get().context,builder: (BuildContext context) {return AlertDialog(title: const Text('第3个弹出框'),content: const Text('这个是一个弹出框的内容文案'),actions: [TextButton(onPressed: () {Navigator.pop(context);chain.proceed();},child: const Text('取消'),),TextButton(onPressed: () {Navigator.pop(context);chain.addChain(OtherDialog(), index: chain.currentIndex);chain.proceed();},child: const Text('添加其他弹出框'),),],);},);}
}///第4个弹窗
class FourDialog implements ChainInterceptor {@overridevoid intercept(ChainHandler chain) {showDialog(builder: (BuildContext context) {return AlertDialog(title: const Text('第4个弹出框'),content: const Text('这个是一个弹出框的内容文案'),actions: [TextButton(onPressed: () {Navigator.pop(context);chain.proceed();},child: const Text('取消'),),TextButton(onPressed: () {Navigator.pop(context);chain.proceed();},child: const Text('确认'),),],);},context: App.get().context,);}
}///其他弹窗(用于案例中插入用)
class OtherDialog implements ChainInterceptor {@overridevoid intercept(ChainHandler chain) {showDialog(context: App.get().context,builder: (BuildContext context) {return AlertDialog(title: const Text('其他弹出框'),content: const Text('这个是一个弹出框的内容文案'),actions: [TextButton(onPressed: () {Navigator.pop(context);chain.proceed();},child: const Text('取消'),),TextButton(onPressed: () {Navigator.pop(context);chain.proceed();},child: const Text('确认'),),],);},);}
}
  • 如何使用
class ChainDialogPage extends StatefulWidget {const ChainDialogPage({super.key});@overrideState<ChainDialogPage> createState() => _ChainDialogPageState();
}class _ChainDialogPageState extends State<ChainDialogPage> {var chainHelper = ChainHelper.builder();@overridevoid initState() {super.initState();}//显示对话框void showDialogs() {chainHelper.addChain(OneDialog());chainHelper.addChain(TwoDialog());chainHelper.addChain(ThreeDialog());chainHelper.addChain(FourDialog());chainHelper.execute();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: XYAppBar(title: "Flutter弹框链",onBack: () {Navigator.pop(context);},),body: SafeArea(child: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: () {showDialogs();},child: const Text("启动弹框链"),),],),),),);}
}

运行后效果

详情:github.com/yixiaolunhui/flutter_xy

相关文章:

Flutter弹窗链-顺序弹出对话框

效果 前言 弹窗的顺序执行在App中是一个比较常见的应用场景。比如进入App首页&#xff0c;一系列的弹窗就会弹出。如果不做处理就会导致弹窗堆积的全部弹出&#xff0c;严重影响用户体验。 如果多个弹窗中又有判断逻辑&#xff0c;根据点击后需要弹出另一个弹窗&#xff0c;这…...

1290.二进制链表转整数

给你一个单链表的引用结点 head。链表中每个结点的值不是 0 就是 1。已知此链表是一个整数数字的二进制表示形式。 请你返回该链表所表示数字的 十进制值 。 示例 1&#xff1a; 输入&#xff1a;head [1,0,1] 输出&#xff1a;5 解释&#xff1a;二进制数 (101) 转化为十进制…...

P8803 [蓝桥杯 2022 国 B] 费用报销

P8803 [蓝桥杯 2022 国 B] 费用报销 分析 最值问题——DP 题意分析&#xff1a;从N张票据中选&#xff0c;且总价值不超过M的票据的最大价值&#xff08;背包问题&#xff09; K天限制 一、处理K天限制&#xff1a; 1.对于输入的是月 日的格式&#xff0c;很常用的方式是…...

【Android】Kotlin学习之Lambda表达式

java和kotlin对比 Lambda语法 Lambda隐形参数 it 也可以不使用指定的名称it, 可以 自定义 Lambda 使用下划线...

YOLOv5-7.0改进(四)添加EMA注意力机制

前言 关于网络中注意力机制的改进有很多种&#xff0c;本篇内容从EMA注意力机制开始&#xff01; 往期回顾 YOLOv5-7.0改进&#xff08;一&#xff09;MobileNetv3替换主干网络 YOLOv5-7.0改进&#xff08;二&#xff09;BiFPN替换Neck网络 YOLOv5-7.0改进&#xff08;三&…...

TCP协议的确认应答机制

TCP&#xff08;Transmission Control Protocol&#xff09;是一种面向连接的、可靠的、基于字节流的传输层协议&#xff0c;它在网络通信中扮演着至关重要的角色。其中&#xff0c;确认应答机制是TCP协议中的一个核心概念&#xff0c;它确保了数据的可靠传输。本文将详细介绍J…...

【论文阅读笔记】MAS-SAM: Segment Any Marine Animal with Aggregated Features

1.论文介绍 MAS-SAM: Segment Any Marine Animal with Aggregated Features MAS-SAM&#xff1a;利用聚合特征分割任何海洋动物 Paper Code(空的) 2.摘要 最近&#xff0c;分割任何模型&#xff08;SAM&#xff09;在生成高质量的对象掩模和实现零拍摄图像分割方面表现出卓越…...

C语言中的精确宽度类型

概述 在 C 语言标准库 <stdint.h> 中定义了一系列精确宽度的整数类型&#xff0c;这些类型保证了它们的位数宽度&#xff0c;从而允许编写跨平台的可移植代码。以下是一些常用的精确宽度整数类型&#xff1a; int8_t: 8位有符号整数uint8_t: 8位无符号整数int16_t: 16位…...

大数据比赛-环境搭建(一)

1、安装VMware Workstation 链接&#xff1a;https://pan.baidu.com/s/1IvSFzpnQFl3svWyCGRtEmg 提取码&#xff1a;ukpo 内有安装包及破解方式&#xff0c;安装教程。 2、下载Ubuntu系统 阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 (aliyun.com) 点击下载&#xff…...

微信小程序原生组件使用

1、video组件使用 <view class"live-video"><video id"myVideo" src"{{videoSrc}}" bindplay"onPlay" bindfullscreenchange"fullScreenChange" controls object- fit"contain"> </video&g…...

[数据集][目标检测]纸箱子检测数据集VOC+YOLO格式8375张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;8375 标注数量(xml文件个数)&#xff1a;8375 标注数量(txt文件个数)&#xff1a;8375 标注…...

2024HW Linux应急响应基础学习

首先展示关于Linux的关键目录&#xff0c;这是应急响应查看的关键&#xff1a; 常用命令 top //查看进程资源的占用情况 ps -aux //查看进程 直接写ps aux也可以 netstat -antpl //查看网络连接 ls -alh /proc/pid //查看某个pid对应的可执行程序 pid记得修改 lsof /…...

烽火三十六技丨网络资产安全治理平台新版本发布,一文看懂四大核心优势

云计算、移动互联网、物联网等技术飞速发展&#xff0c;网络环境愈发开放互联&#xff0c;原有的资产管理方式已难以适应当下的变化。同时&#xff0c;网络资产需求的突发性和人为疏忽&#xff0c;也时常导致资产数量不明、类型模糊、安全漏洞检查不全面等问题。因此&#xff0…...

视频资源汇聚平台常见的几种接入方式

视频资源汇聚平台 视频汇聚平台可以实现海量资源的接入、汇聚、存储、处理、分析、运维等&#xff0c;平台具备轻量化接入能力&#xff0c;可支持多协议方式接入&#xff0c;包括主流标准协议GB28181、RTSP、ONVIF、RTMP、FLV、WEBSOCKET等&#xff0c;以及厂家私有协议与SDK接…...

LeetCode 212.单词搜索II

https://leetcode.cn/problems/word-search-ii/description/?envTypestudy-plan-v2&envIdtop-interview-150 文章目录 题目描述解题思路代码实现 题目描述 给定一个 m x n 二维字符网格 board 和一个单词&#xff08;字符串&#xff09;列表 words&#xff0c; 返回所有二…...

android 蓝牙技术 学习记录

一 。蓝牙介绍 蓝牙可以分为 经典蓝牙-----》传统蓝牙(BT 1.0/2.0/2.1)和高速蓝牙(BT3.0) 低功耗蓝牙 ----》BLE(BLE 4.0/4.1/4.2/5.0./5.1/5.2)和 Bluetooth Mesh 关于蓝牙协议。除开Mesh大致可以分为3层: App:上层协议有很多,例如ANP,HOGP,FTMP 等等 host:中…...

2024数维杯数学建模B题完整论文讲解(含每一问python代码+结果+可视化图)

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了2024数维杯数学建模挑战赛生物质和煤共热解问题的研究完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 B题论…...

二叉树进阶 --- 中

目录 1. find 的递归实现 2. insert 的递归实现 3. erase 的递归实现 3.1. 被删除的节点右孩子为空 3.2. 被删除的节点左孩子为空 3.3. 被删除的节点左右孩子都不为空 4. 析构函数的实现 5. copy constructor的实现 6. 赋值运算符重载 7. 搜索二叉树的完整实现 1. fi…...

ChatGPT DALL-E绘图,制作各种表情包,实现穿衣风格的自由切换

DALL-E绘图功能探索&#xff1a; 1、保持人物形象一致&#xff0c;适配更多的表情、动作 2、改变穿衣风格 3、小女孩的不同年龄段展示 4、不同社交平台的个性头像创作 如果不会写代码&#xff0c;可以问GPT。使用地址&#xff1a;我的GPT4 视频&#xff0c;B站会发&#…...

程序环境和预处理、编译链接过程、编译的几个阶段、运行环境、预定义符号等的介绍

文章目录 前言一、程序的翻译环境和执行环境二、编译链接过程三、编译的几个阶段四、运行环境五、预定义符号总结 前言 程序环境和预处理、编译链接过程、编译的几个阶段、运行环境、预定义符号的介绍。 一、程序的翻译环境和执行环境 在 ANSI C 的任何一种实现中&#xff0c…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

RushDB开源程序 是现代应用程序和 AI 的即时数据库。建立在 Neo4j 之上

一、软件介绍 文末提供程序和源码下载 RushDB 改变了您处理图形数据的方式 — 不需要 Schema&#xff0c;不需要复杂的查询&#xff0c;只需推送数据即可。 二、Key Features ✨ 主要特点 Instant Setup: Be productive in seconds, not days 即时设置 &#xff1a;在几秒钟…...

初级程序员入门指南

初级程序员入门指南 在数字化浪潮中&#xff0c;编程已然成为极具价值的技能。对于渴望踏入程序员行列的新手而言&#xff0c;明晰入门路径与必备知识是开启征程的关键。本文将为初级程序员提供全面的入门指引。 一、明确学习方向 &#xff08;一&#xff09;编程语言抉择 编…...

宠物车载安全座椅市场报告:解读行业趋势与投资前景

一、什么是宠物车载安全座椅&#xff1f; 宠物车载安全座椅是一种专为宠物设计的车内固定装置&#xff0c;旨在保障宠物在乘车过程中的安全性与舒适性。它通常由高强度材料制成&#xff0c;具备良好的缓冲性能&#xff0c;并可通过安全带或ISOFIX接口固定于车内。 近年来&…...