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

Flutter中的事件冒泡处理

在 Flutter 中,GestureDetector 的点击事件默认是冒泡的,即如果嵌套了多个 GestureDetector,点击事件会从最内层的 GestureDetector 开始触发,然后依次向外层传递。如果你希望控制事件的优先级或阻止事件冒泡,可以使用以下方法:


1. 使用 HitTestBehavior

GestureDetectorbehavior 属性可以控制点击事件的命中测试行为。常用的选项有:

  • HitTestBehavior.deferToChild(默认):事件会传递给子组件,如果子组件不处理,则父组件处理。
  • HitTestBehavior.opaque:事件会被当前组件捕获,不会传递给子组件。
  • HitTestBehavior.translucent:事件会同时传递给当前组件和子组件。
示例
GestureDetector(onTap: () {// 父组件的点击事件print('父组件点击');},behavior: HitTestBehavior.opaque, // 阻止事件传递给子组件child: GestureDetector(onTap: () {// 子组件的点击事件print('子组件点击');},child: Card(child: Container(width: 100,height: 100,color: Colors.blue,),),),
);

在这个例子中,由于父组件的 behavior 设置为 HitTestBehavior.opaque,点击事件会被父组件捕获,子组件的点击事件不会触发。


2. 使用 AbsorbPointer

AbsorbPointer 是一个可以阻止子组件接收点击事件的组件。你可以通过设置 absorbing 属性来控制是否阻止事件传递。

示例
GestureDetector(onTap: () {// 父组件的点击事件print('父组件点击');},child: AbsorbPointer(absorbing: true, // 阻止子组件接收点击事件child: GestureDetector(onTap: () {// 子组件的点击事件(不会触发)print('子组件点击');},child: Card(child: Container(width: 100,height: 100,color: Colors.blue,),),),),
);

在这个例子中,由于 AbsorbPointerabsorbing 属性为 true,子组件的点击事件不会触发。


3. 使用 Listener

Listener 是一个更低级别的组件,可以监听原始的指针事件。你可以通过 onPointerDown 等回调来控制事件传递。

示例
Listener(onPointerDown: (event) {// 阻止事件传递给子组件print('父组件点击');},child: GestureDetector(onTap: () {// 子组件的点击事件(不会触发)print('子组件点击');},child: Card(child: Container(width: 100,height: 100,color: Colors.blue,),),),
);

在这个例子中,ListeneronPointerDown 会捕获事件并阻止其传递给子组件。


4. 你的场景的解决方案

在你的代码中,有两个嵌套的 GestureDetector,分别用于切换隐私模式和显示操作菜单。你可以通过以下方式设置优先级:

方案 1:使用 HitTestBehavior
GestureDetector(onTap: () {// 点击切换隐私模式Provider.of<TodoProvider>(context, listen: false).togglePrivacy(todo.id);},behavior: HitTestBehavior.opaque, // 阻止事件传递给子组件child: GestureDetector(onTap: () => _showActionMenu(context, todo),child: Card(child: Container(width: 100,height: 100,color: Colors.blue,),),),
);
方案 2:使用 AbsorbPointer
GestureDetector(onTap: () {// 点击切换隐私模式Provider.of<TodoProvider>(context, listen: false).togglePrivacy(todo.id);},child: AbsorbPointer(absorbing: true, // 阻止子组件接收点击事件child: GestureDetector(onTap: () => _showActionMenu(context, todo),child: Card(child: Container(width: 100,height: 100,color: Colors.blue,),),),),
);
方案 3:使用 Listener
Listener(onPointerDown: (event) {// 点击切换隐私模式Provider.of<TodoProvider>(context, listen: false).togglePrivacy(todo.id);},child: GestureDetector(onTap: () => _showActionMenu(context, todo),child: Card(child: Container(width: 100,height: 100,color: Colors.blue,),),),
);

5. 总结

  • HitTestBehavior:通过设置 behavior 属性控制事件传递。
  • AbsorbPointer:通过 absorbing 属性阻止子组件接收事件。
  • Listener:通过监听原始指针事件控制事件传递。

相关文章:

Flutter中的事件冒泡处理

在 Flutter 中&#xff0c;GestureDetector 的点击事件默认是冒泡的&#xff0c;即如果嵌套了多个 GestureDetector&#xff0c;点击事件会从最内层的 GestureDetector 开始触发&#xff0c;然后依次向外层传递。如果你希望控制事件的优先级或阻止事件冒泡&#xff0c;可以使用…...

昇腾环境ppstreuct部署问题记录

测试代码 我是在华为昇腾910B3上测试的PPStructure。 import os import cv2 from PIL import Image #from paddleocr import PPStructure,draw_structure_result,save_structure_res from paddleocr_asyncio import PPStructuretable_engine PPStructure(show_logTrue, imag…...

基于 Python 的财经数据接口库:AKShare

AKShare 是基于 Python 的财经数据接口库&#xff0c;目的是实现对股票、期货、期权、基金、外汇、债券、指数、加密货币等金融产品的基本面数据、实时和历史行情数据、衍生数据从数据采集、数据清洗到数据落地的一套工具&#xff0c;主要用于学术研究目的。 安装 安装手册见…...

电力场景红外测温图像绝缘套管分割数据集labelme格式2436张1类别

数据集格式&#xff1a;labelme格式(不包含mask文件&#xff0c;仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)&#xff1a;2436 标注数量(json文件个数)&#xff1a;2436 标注类别数&#xff1a;1 标注类别名称:["arrester"] 每个类别标注的框数&am…...

数字艺术类专业人才供需数据获取和分析研究

本文章所用数据集&#xff1a;数据集 本文章所用源代码&#xff1a;源代码和训练好的模型 第1章 绪论 1.1研究背景及意义 随着社会经济的迅速发展和科技的飞速进步&#xff0c;数字艺术类专业正逐渐崛起&#xff0c;并呈现出蓬勃发展的势头。数字艺术作为创作、设计和表现形式的…...

Java中json的一点理解

一、Java中json字符串与json对象 1、json本质 json是一种数据交换格式。 常说的json格式的字符串 > 发送和接收时都只是一个字符串&#xff0c;它遵循json这种格式。 2、前后端交互传输的json是什么&#xff1f; 前后端交互传输的json都是json字符串 比如&#xff1a;…...

Vue项目搭建教程超详细

目录 一. 环境准备 1. 安装node.js 2. 安装Vue cli 二. 创建 Vue 2 项目 1. 命令行方式 2. vue ui方式 一. 环境准备 1. 安装node.js 可参考node.js卸载与安装超详细教程-CSDN博客 2. 安装Vue cli npm install -g vue/cli检查是否安装成功 vue --version Vue CLI …...

2025年01月蓝桥杯Scratch1月stema选拔赛真题—美丽的图形

美丽的图形 编程实现美丽的图形具体要求: 1)点击绿旗&#xff0c;角色在舞台中心&#xff0c;如图所示&#xff1b; 2)1秒后&#xff0c;绘制一个边长为 140的红色大正方形&#xff0c;线条粗细为 3&#xff0c;正方形的中心为舞台中心&#xff0c;如图所示; 完整题目可点击下…...

【React】插槽渲染机制

目录 通过 children 属性结合条件渲染通过 children 和 slot 属性实现具名插槽通过 props 实现具名插槽 在 React 中&#xff0c;并没有直接类似于 Vue 中的“插槽”机制&#xff08;slot&#xff09;。但是&#xff0c;React 可以通过 props和 children 来实现类似插槽的功能…...

计算机网络 | 什么是公网、私网、NAT?

关注&#xff1a;CodingTechWork 引言 计算机网络是现代信息社会的基石&#xff0c;而网络通信的顺畅性和安全性依赖于有效的IP地址管理和网络转换机制。在网络中&#xff0c;IP地址起到了标识设备和进行数据传输的核心作用。本文将详细讨论公网IP、私网IP以及NAT转换等网络技…...

如何解决Outlook无法连接到服务器的问题

Microsoft Outlook 是一款广泛使用的电子邮件客户端&#xff0c;它能够帮助用户高效地管理邮箱、日历和任务。然而&#xff0c;尽管其功能强大&#xff0c;用户有时会遇到“Outlook无法连接到服务器”的问题。这种问题通常会让用户无法接收或发送电子邮件&#xff0c;甚至可能导…...

vue2 web 多标签输入框 elinput是否当前焦点

又来分享一点点工作积累及解决方案 产品中需要用户输入一些文字后按下回车键生成标签来显示在页面上&#xff0c;经过尝试与改造完成如下&#xff1a; <template><div class"tags-view" click"beginInput"><el-tag :key"index" …...

32单片机综合应用案例——物联网(IoT)环境监测站(四)(内附详细代码讲解!!!)

无论你身处何种困境&#xff0c;都要坚持下去&#xff0c;因为勇气和毅力是成功的基石。不要害怕失败&#xff0c;因为失败并不代表终结&#xff0c;而是为了成长和进步。相信自己的能力&#xff0c;相信自己的潜力&#xff0c;相信自己可以克服一切困难。成功需要付出努力和坚…...

LabVIEW与WPS文件格式的兼容性

LabVIEW 本身并不原生支持将文件直接保存为 WPS 格式&#xff08;如 WPS 文档或表格&#xff09;。然而&#xff0c;可以通过几种间接的方式实现这一目标&#xff0c;确保您能将 LabVIEW 中的数据或报告转换为 WPS 可兼容的格式。以下是几种常见的解决方案&#xff1a; ​ 导出…...

小结: 路由协议的演进和分类

路由协议的演进和分类&#xff0c;包括其发展历史及主要应用场景。路由协议用于在网络中确定数据传输的最佳路径&#xff0c;主要分为内部网关协议&#xff08;IGP&#xff09;和外部网关协议&#xff08;EGP&#xff09; AS-AS 之间的。 路由协议的演进 1982年&#xff1a;出…...

OpenCV相机标定与3D重建(60)用于立体校正的函数stereoRectify()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 为已校准的立体相机的每个头计算校正变换。 cv::stereoRectify 是 OpenCV 中用于立体校正的函数&#xff0c;它基于已知的相机参数和相对位置&am…...

Android wifi列表中去自身的热点

Android wifi列表中去自身的热点 一、前言 Android wifi列表中能搜索到自身的热点wifi&#xff1f; 正常手机上都不会出现这个问题&#xff1b;可能是系统底层已经做了过滤处理。 现实开发中Android设备的Wifi能搜索到自身热点也可能会存在。 比如基于两个单独的wifi双模组硬…...

Windows环境本地配置pyspark环境详细教程

目录 一、背景简记二、本地单机spark环境配置详细步骤第一步&#xff1a;python环境安装第二步&#xff1a;安装jdk及配置环境变量安装包下载安装环境变量配置 第三步&#xff1a;安装Spark安装包下载安装配置环境变量 第四步&#xff1a;安装hadoop安装包下载安装配置环境变量…...

《自动驾驶与机器人中的SLAM技术》ch9:自动驾驶车辆的离线地图构建

目录 1 点云建图的流程 2 前端实现 2.1 前端流程 2.2 前端结果 3 后端位姿图优化与异常值剔除 3.1 两阶段优化流程 3.2 优化结果 ① 第一阶段优化结果 ② 第二阶段优化结果 4 回环检测 4.1 回环检测流程 ① 遍历第一阶段优化轨迹中的关键帧。 ② 并发计算候选回环对…...

IP属地会随着人的移动而改变吗

在当今数字化时代&#xff0c;互联网已成为人们生活中不可或缺的一部分。无论是社交媒体的日常互动&#xff0c;还是在线购物、远程工作&#xff0c;IP地址作为网络身份的重要标识&#xff0c;扮演着举足轻重的角色。随着移动互联网技术的飞速发展&#xff0c;人们越来越多地在…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...