掌握 Flutter 中的 `Overlay` 和 `OverlayEntry`:弹窗管理的艺术

掌握 Flutter 中的 OverlayOverlayEntry:弹窗管理的艺术

在 Flutter 应用开发中,弹窗是一种常见的用户交互方式,用于显示警告、提示或额外信息。为了确保这些弹窗能够按预期显示,并且能够在需要时覆盖其他弹窗,我们需要精细地控制它们的层级和显示顺序。本文将介绍如何使用 Flutter 的 OverlayOverlayEntry 来管理弹窗,确保它们始终显示在最上层。

弹窗管理工具类:DialogManager

为了更好地管理弹窗的显示和隐藏,我们可以创建一个名为 DialogManager 的工具类。这个类将负责创建和管理 OverlayEntry,确保弹窗能够正确地显示在应用的最上层。

创建 DialogManager

import 'package:flutter/material.dart';class DialogManager {static OverlayEntry? _overlayEntry;static Future<void> showVersionUpdateDialog({required BuildContext context,required VersionUpdateShowModel versionUpdateShowModel,}) {// 移除已存在的弹窗_overlayEntry?.remove();_overlayEntry = _createOverlayEntry(context, versionUpdateShowModel);Overlay.of(context)?.insert(_overlayEntry!);return Future.value();}static OverlayEntry _createOverlayEntry(BuildContext context, VersionUpdateShowModel versionUpdateShowModel) {return OverlayEntry(builder: (context) => GestureDetector(onTap: () {if (!versionUpdateShowModel.isForceUpdate) {_overlayEntry?.remove();_overlayEntry = null;}},child: Dialog(backgroundColor: Colors.transparent,child: PopScope(canPop: !versionUpdateShowModel.isForceUpdate,child: ShowVersionUpdatePage(updateVersion: versionUpdateShowModel.updateVersion,updateContentList: versionUpdateShowModel.updateContentList,enableClose: !versionUpdateShowModel.isForceUpdate,),),),),);}static void dismiss() {_overlayEntry?.remove();_overlayEntry = null;}
}

定义 ShowVersionUpdatePage 组件

为了使弹窗内容可重用,我们可以将 ShowVersionUpdatePage 定义为一个独立的组件。

import 'package:flutter/material.dart';class ShowVersionUpdatePage extends StatelessWidget {final String updateVersion;final List<String> updateContentList;final bool enableClose;const ShowVersionUpdatePage({Key? key,required this.updateVersion,required this.updateContentList,this.enableClose = true,}) : super(key: key);Widget build(BuildContext context) {return Container(padding: EdgeInsets.all(16),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(8),),child: Column(mainAxisSize: MainAxisSize.min,children: [Text('更新版本 $updateVersion', style: Theme.of(context).textTheme.headline6),...updateContentList.map((content) => Padding(padding: const EdgeInsets.symmetric(vertical: 8.0),child: Text(content),)),if (!enableClose)TextButton(child: Text('更新'),onPressed: () {Navigator.of(context).pop();// 处理更新逻辑},),],),);}
}

使用 DialogManager 显示弹窗

在需要显示弹窗的地方,调用 DialogManagershowVersionUpdateDialog 方法。

import 'package:flutter/material.dart';
import 'dialog_manager.dart';class YourWidget extends StatelessWidget {final VersionUpdateShowModel versionUpdateShowModel = VersionUpdateShowModel();void _showDialog() {DialogManager.showVersionUpdateDialog(context: Get.context!,versionUpdateShowModel: versionUpdateShowModel,);}Widget build(BuildContext context) {return ElevatedButton(onPressed: _showDialog,child: Text('显示版本更新弹窗'),);}
}

确保弹窗在最上层

通过在显示新弹窗之前移除已有的 OverlayEntry,我们可以确保弹窗始终显示在最上层。

总结

通过使用 OverlayOverlayEntry,我们可以更精细地控制弹窗的显示和层级,确保它们能够覆盖其他弹窗。DialogManager 类提供了一个可重用的方式来管理弹窗的显示和隐藏,使得在多个地方调用和控制弹窗变得轻松而高效。这种方法不仅提高了代码的可维护性,也提升了用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/146016.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Vue学习记录之六(组件实战及BEM框架了解)

一、BEM BEM是一种前端开发中常用的命名约定&#xff0c;主要用于CSS和HTML的结构化和模块化。BEM是Block、Element、Modifier的缩写。 Block&#xff08;块&#xff09;&#xff1a;独立的功能性页面组件&#xff0c;可以是一个简单的按钮&#xff0c;一个复杂的导航条&…

无法创建新的堆栈防护界面

&#x1f3c6;本文收录于《全栈Bug调优(实战版)》专栏&#xff0c;主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&am…

商业实战!深入剖析StableDiffusion 电商服装模特精准替换真人,虚拟模特变现教程

大家好&#xff0c;我是灵魂画师向阳 在之前的文章中&#xff0c;我们已经深入讲解了SD与ControlNet基础知识和原理。接下来我们将结合这一堆基础工具法宝组合使用&#xff0c;完成一些有意义的AIGC商业实战案例分享。也欢迎大家在文末留言建议希望了解的实战案例。 本文是来…

在基准测试和规划测试中选Flat还是Ramp-up?

Flat测试和Ramp-up测试是各有优势的&#xff0c;下面我们就通过介绍几种实用的性能测试策略来分析这两种加压策略的着重方向。 基准测试 基准测试是一种测量和评估软件性能指标的活动&#xff0c;通过基准测试建立一个已知的性能水平&#xff08;称为基准线&#xff09;&…

计算机毕业设计 美妆神域网站的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

table表格,让thead固定,tbody内容滚动,关键是都对齐的纯css写法

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f…

编程实践|用 MoonBit 实现线段树(一)

引言 线段树(Segment Tree)是一种常见的数据结构&#xff0c;用于解决一些线性区间的修改、查询问题&#xff0c;比如对于问题&#xff1a; 给出一个长度已知的、有初值的数字数组&#xff0c;接下来要进行许多区间加法操作&#xff08;将一个区间的数值都加上某个值&#xf…

线性dp 总结详解

就是感觉之前 dp 的 blog 太乱了整理一下。 LIS(最长上升子序列) 例题 给定一个整数序列&#xff0c;找到它的所有严格递增子序列中最长的序列&#xff0c;输出其长度。 思路 拿到题目&#xff0c;大家第一时间想到的应该是的暴力(dp)做法&#xff1a; #include <bits/s…

锐尔15注册机 锐尔文档扫描影像处理系统15功能介绍

锐尔文档扫描影像处理系统是一款全中文操作界面的文件、档案扫描及影像优化处理软件&#xff0c;是目前国内档案数字化行业里专业且优秀的影像优化处理软件。 无论是从纸质文件制作高质量的影像文件&#xff0c;或是检查已经制作好的影像文件&#xff0c;锐尔文档扫描影像处理…

LangChain 和 Elasticsearch 加速构建 AI 检索代理

作者&#xff1a;来自 Elastic Joe McElroy, Aditya Tripathi, Serena Chou Elastic 和 LangChain 很高兴地宣布发布新的 LangGraph 检索代理模板&#xff0c;旨在简化需要代理使用 Elasticsearch 进行代理检索的生成式人工智能 (GenAI) 代理应用程序的开发。此模板预先配置为使…

C++第十一节课 new和delete

一、new和delete操作自定义类型 new/delete 和 malloc/free最大区别是 new/delete对于【自定义类型】除了开空间还会调用构造函数和析构函数&#xff08;new会自动调用构造函数&#xff1b;delete会调用析构函数&#xff09; class A { public:A(int a 0): _a(a){cout <&l…

使用express或koa或nginx部署history路由模式的单页面应用

使用hash模式会有#&#xff0c;影响美观&#xff0c;所以使用history模式会是个更好的选择。 前端项目打包上线部署&#xff0c;可以使用下面的方式部署history模式的项目&#xff0c;下面以 jyH5 为例 expressjs部署 express脚手架搭建的app.js中添加如下代码&#xff1a; …

Superset二次开发之优化Mixed Chart 混合图(柱状图+折线)

背景 基于Mixed Chart(柱状图+折线)作图,显示 某维度A Top10 + 其他 数据,接口返回了值为 undefined 的某维度A 数据,前端渲染成 某维度A 值为 0 此图表存在的问题: 图表控件编辑页面,即便数据集正常查询出 Top10 + ‘其他’ 数据,但是堆积图表渲染时,返回了 值为 0…

【网络通信基础与实践第四讲】用户数据报协议UDP和传输控制协议TCP

一、UDP的主要特点 1、UDP是无连接的&#xff0c;减少了开销和发送数据之前的时延 2、UDP使用尽最大努力交付&#xff0c;但是不保证可靠交付 3、UDP是面向报文的。从应用层到运输层再到IP层都只是添加一个相应的首部即可 4、UDP没有拥塞机制&#xff0c;源主机以恒定的速率…

Zookeeper安装使用教程

# 安装 官网下载安装包 #配置文件 端口默认8080&#xff0c;可能需要更改一下 #启动 cd /Users/lisongsong/software/apache-zookeeper-3.7.2-bin/bin ./zkServer.sh start #查看运行状态 ./zkServer.sh status #停止 ./zkServer.sh stop #启动客户端 ./zkCli.sh ls /

Linux ubuntu debian系统安装UFW防火墙图形化工具GUFW

GUFW是UFW的图形化前端&#xff0c;可以通过以下命令安装&#xff1a; sudo apt install gufw安装成功后&#xff0c;可以通过应用程序菜单启动GUFW&#xff0c;在图形界面中&#xff0c;可以方便地添加、修改和删除规则&#xff0c;查看状态和日志。

java之杨辉三角问题

给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 如何实现呢&#xff1f; 思路&#xff1a;首先&#xff0c;我们可以将杨辉三角视作i行j列的二维数组。除了第一行和第二行之外&am…

IPD流程体系:IPD在硬件产品开发中的应用

目录 1、内容简介 2、开发各阶段介绍 3、PVT阶段 4、资源群更新 作者简介 1、内容简介 在硬件类相关产品的开发过程中&#xff0c; 每个阶段的工作都是需要按照一定的流程、规范和标准去进行的。 整体还是相对瀑布化的流程&#xff0c; 每个阶段的输入、输出、准入、准…

C++初阶学习——探索STL奥秘——反向迭代器

适配器模式是 STL 中的重要组成部分&#xff0c;除了容器适配器外&#xff0c;还有 选代器适配器&#xff0c;借助 选代器适配器 &#xff0c;可以轻松将各种容器中的普通迭代器转变为反向迭代器&#xff0c;这正是适配器的核心思想 注:库中的反向迭代器在设计时&#xff0c;为…

【HTTP】请求“报头”(Host、Content-Length/Content-Type、User-Agent(简称 UA))

Host 表示服务器主机的地址和端口号 URL 里面不是已经有 Host 了吗&#xff0c;为什么还要写一次&#xff1f; 这里的 Host 和 URL 中的 IP 地址、端口什么的&#xff0c;绝大部分情况下是一样的&#xff0c;少数情况下可能不同当前我们经过某个代理进行转发。过程中&#xf…