flutter的Overlay详解

Overlay

用于在屏幕上显示浮层的组件

定义及作用

  • 用于在屏幕上显示浮层的组件。
  • 创建弹出窗口、提示框、菜单、对话框等。

源码分析

/// Overlay的设计思路
class Overlay extends StatefulWidget
//可以看出Overlay是一个有状态的widget,直接看对应的OverlayState里面的实现。
final List<OverlayEntry> _entries = <OverlayEntry>[];
//OverlayState里面维护OverlayEntry的列表,那么OverlayEntry是什么?/// 在OverlayEntry注释里有这样一段:
Because an [Overlay] uses a [Stack] layout, overlay entries can use [Positioned] and [AnimatedPositioned] to position themselves within the overlay.
//这句话可以理解为Overlay包含一个Stack布局,每个浮层都是一个Positioned widget,可以添加到Stack中。
又因为Stack是可以覆盖的,所以就能做出浮窗等效果。/// 至此已经明白了一个基本思路:OverlayEntry是浮窗的UI,而OverlayState通过维护OverlayEntry来显示对应的UI。那么怎么绘制的呢?
Widget build(BuildContext context) {...for (int i = _entries.length - 1; i >= 0; i -= 1) {...children.add(_OverlayEntryWidget(key: entry._key,entry: entry,));
// 至此,在build里,通过_OverlayEntryWidget这个实际绘制UI的widget绘制,然后add给children,children在给真正绘制的UI的地方(这就不继续跟下去了,这里着重发现Overlay的设计思路)/// 总结:OverlayEntry是浮窗的UI,而OverlayState在build遍历OverlayEntry的列表来绘制每一个OverlayEntry。

使用举例

  • 基于上面总结原理,使用Overlay就需要在OverlayEntry里绘制UI,然后add给OverlayState。
  • 如下(步骤在注释上):
class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return SafeArea(child: Scaffold(body: Column(children: [ElevatedButton(onPressed: () => btn1(context),child: const Text("btn1"),),],),),);}void btn1(BuildContext context) {/// 步骤1:绘制OverlayEntry的UIOverlayEntry? overlayEntry;overlayEntry = OverlayEntry(builder: (context) {return Positioned(// 指定位置left: 0,top: 100,child: GestureDetector(// 点击删除onTap: () {overlayEntry?.remove();},// 背景随机色child: Container(width: 100,height: 100,color: Colors.red,child: const Center(// 提示文字child: Text("这是一个 overlay 浮层, 点击关闭",style: TextStyle(color: Colors.white,fontSize: 10,decoration: TextDecoration.none,),),),),),);});/// 步骤2:把OverlayEntry的添加给overlayState。overlayState自己就会去setState展示OverlayState? overlayState = Overlay.of(context);overlayState.insert(overlayEntry);/// 步骤2:实际使用时通过Overlay.of(context)获得OverlayState要在dispose()时销毁}
}

补充

OverlayEntry

  • 构造函数及描述参数作用:
OverlayEntry({required this.builder,  // 绘制UIbool opaque = false,    // 是否不透明的,设置为true,就会让当前屏幕除了UI,都被遮盖,因为不透明嘛bool maintainState = false, //绘制的UI里如果没有用StatefulWidget,就设置为false,如果用了并且希望接收到外层的setState就设置为true
})

OverlayState

  • 前面说了OverlayState是维护OverlayEntry的。而实际开发中弹框也不会弹多个浮层令人厌烦,所以OverlayState的维护(增删排序等)功能,基本无须过多了解。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

配置CentOS服务器以支持PHP

CentOS是一款优秀的开源服务器操作系统&#xff0c;为各种网络服务提供了强大的支持。为了使CentOS服务器能够支持PHP&#xff0c;我们需要进行一些必要的配置。下面将介绍配置CentOS服务器以支持PHP的关键步骤。 安装PHP 首先&#xff0c;需要安装PHP解释器。在CentOS上&…

【python】使用pipenv创建虚拟环境进行打包

文章目录 一、pipenv 介绍二、快速上手使用pipenv2.1 安装pipenv2.2 创建虚拟环境2.3 激活环境2.4 虚拟环境中安装项目依赖包2.5 检查项目在虚拟环境中是否能正常运行2.6 打包项目2.7 删除虚拟环境 起因: 本地安装的模块太多,使用pyinstaller打包,会把许多无关模块打包进去&…

【头歌系统数据库实验】实验5 SQL的多表查询-1

目录 第1关&#xff1a;等值连接&#xff1a;求S表和J表城市相同的等值连接(列顺序还是按照S、J表) 第2关&#xff1a;查询供应情况&#xff0c;并显示供应商、零件和工程三者的名称 第3关&#xff1a;找出上海厂商供应的所有零件号码 第4关&#xff1a;找出使用上海产的零…

pythonGIL锁

一、GIL&#xff08;Global Interpreter Lock&#xff09;全局解释器锁是Python解释器中的一个机制&#xff0c;用于保证同一个时间只有一个线程能够执行Python字节码。这意味着在同一个时刻&#xff0c;只有一个线程能够访问共享的Python对象。 1、数据都是全局共享的&#x…

关于inline函数声明和定义为什么不可以分离

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 前言 inline函数在使用时声明和定义不可以分离&#xff0c;接下来我们将会解释为什么是这样的。 我们从程序的编译链接说起。 首先我们先介绍一下程序的翻译环境&#xff1a; 编译分以下几个步骤&#xff0c;预处理&#x…

Hadoop学习笔记(HDP)-Part.08 部署Ambari集群

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

Python 字典详解(dict)

文章目录 1 概述1.1 性质 2 常用方法2.1 以列表返回所有键&#xff1a;keys()2.2 以列表返回所有值&#xff1a;values()2.3 以列表返回所有键值对&#xff1a;items()2.4 返回键对应的值&#xff1a;get()2.5 添加键值对&#xff1a;setdefault()2.6 修改键值对&#xff1a;di…

记录 | python保存pytorch tensor至txt中的方法

有时候&#xff0c;为了方便调试、定位问题&#xff0c;需要把 pytorch 中的 tensor 张量保存到 txt 中&#xff0c;方法如下&#xff0c; 比如需要保存的 pytorch 的 tensor 为 outputs&#xff0c;其维度为 [1, 1, 250, 11]&#xff0c;则&#xff1a; with open("outp…

R语言【rgbif】——最全最详细的函数解读(occ_search)

occ_search最全最详细的参数解读 occ_search有什么作用&#xff1f;occ_search有哪些参数&#xff1f;occ_search的参数使用&#xff1f;aa. 通过名称完成筛选的参数1. taxonKey&#xff08;用于检索的类群的标识符&#xff09;2. scientificName&#xff08;用于检索的类群的科…

U盘文件突然不见了怎么恢复?文件恢复(3个方法)!

“好奇怪呀&#xff01;一般我都会把比较重要的文件保存在u盘中&#xff0c;但是今天使用u盘的时候却发现u盘里的文件突然不见了&#xff0c;这是为什么呢&#xff1f;我怎么才能恢复这些数据呢&#xff1f;” 在我们的日常生活和工作中&#xff0c;U盘作为一种便携式的存储设备…

ChatGPT哪些行业需要学习?

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

CSS进阶知识点速览2

1 前情回顾 关于选择器进阶、背景色、元素显示模式和css特性的前半部分集中在下面的笔记中&#xff1a; css进阶知识点速览 2 CSS特性 2.1 优先级 特性&#xff1a;不同选择器具有不同的优先级&#xff0c;优先级高的选择器样式会覆盖优先级低选择器样式 优先级公式&#x…

网安专家带你学透网络渗透测试,小白零基础启航

渗透测试简介 渗透测试&#xff0c;作为评估网络安全的一种方法&#xff0c;模拟攻击者对目标系统的攻击&#xff0c;以评估系统的安全性。这种方法不仅揭示了系统的潜在漏洞&#xff0c;而且还帮助我们理解攻击者可能利用这些漏洞的方式。在这个数字化和网络化日益增长的时代…

Flask 集成SQLAlchemy

在这一篇中&#xff0c;我们将学习如何在 Flask 中集成数据库&#xff0c;并使用 ORM&#xff08;对象关系映射&#xff09;来进行数据库操作。数据库是许多 Web 应用的核心组成部分&#xff0c;通过使用 Flask-SQLAlchemy 这个强大的工具&#xff0c;我们可以轻松地与数据库进…

R语言【rgbif】——最全最详细的函数解读(name_suggest)

name_suggest最全最详细的参数解读 1. name_suggest的基本情况2. name_suggest的参数3. name_suggest的示例与理解3.1 参数 【q】3.2 参数【rank】3.3 参数【limit】3.4 参数【fields】3.5 参数【datasetKey】3.6 参数【curlopts】 1. name_suggest的基本情况 name_suggest是用…

堆能高效解决的经典问题

关卡名 堆能高效解决的经典问题 我会了✔️ 内容 1.掌握数组中寻找第K的元素 ✔️ 2.理解堆排序的原理 ✔️ 3.合并K个排序链表 ✔️ 1 在数组中找第K大的元素 LeetCode215 给定整数数组nums和整数k&#xff0c;请返回数组中第k个最大的元素。 请注意&#xff0c;你需要…

力扣面试经典150题——Unix简化路径

https://leetcode.cn/problems/simplify-path/description/?envTypestudy-plan-v2&envIdtop-interview-150 思路&#xff1a;将串以/分割&#xff0c;判断字符串是…/./其他&#xff0c;进行入栈和出栈&#xff0c;最后留下的就是结果&#xff0c;拼装一下就好了。 三个…

shell echo 不换行 覆盖当前行

echo -n 不换行输出 法1. echo -n "123" echo "456" 结果为&#xff1a; 123456 法2 echo -e "123\c" echo "456" 结果为&#xff1a; 123456 不换行&#xff0c;覆盖当前行 注&#xff1a; -n 不换行 \r 光标移到行首 如 echo -…

海上液化天然气 LNG 终端 ,数字孪生监控系统

液化天然气 (Liquefied Natural Gas&#xff0c;简称 LNG) 在能源转型过程中被广泛认可为相对较清洁的能源选择。 相对于传统的煤炭和石油燃料&#xff0c;LNG 的燃烧过程产生的二氧化碳 (CO2) 排放较低。LNG 的燃烧释放的二氧化碳排放较少&#xff0c;因此对应对气候变化和减…

Linux服务器配置指南:网络、用户管理、共享服务及DNS配置详解

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 1&#xff0e;Linux操作系统网络配置&#xff…