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

QML 鼠标穿透

事件:
有一个输入框(TextField),需要实现鼠标悬浮时改变边框颜色,鼠标移出后恢复原来边框颜色;
这时如果需要实现此功能,就得使用到MouseArea,鼠标操作区域填充满整个TextField。
然后实现鼠标移入移入出的修改边框颜色的效果,具体实现代码:

TextField {id: pwdTextFieldwidth: 400height: 40font.pixelSize: height / 2placeholderText: "请输入密码"            // 背景提示文本placeholderTextColor: "#303037"         // 提示文本颜色verticalAlignment: Text.AlignVCenter    // 文本垂直居中anchors.centerIn: parentbackground: Rectangle {anchors.fill: parentradius: pwdTextField.height / 2color: "#CCFFFF"border.width: 1border.color: pwdTextField.focus ? "#FF66FF" : "#222"MouseArea {anchors.fill: parent		// 鼠标区域填充满整个TextFieldhoverEnabled: true			// 启用鼠标悬浮追踪onEntered: {				// 鼠标进入parent.border.color = "#FF66FF"}onExited: {					// 鼠标移出parent.border.color = pwdTextField.focus ? "#FF66FF" : "#222"}}}
}

但是,此时就出现问题了,鼠标区域会覆盖TextField,使得TextField无法输入文本了
在这里插入图片描述
鼠标移入实现边框颜色改变,移出恢复功能确实已经实现了,但是,输入框无法输入文本了…

原因就是设置MouseArea时将TextField给遮住了;

解决问题的方案就是鼠标穿透!将MouseArea的点击事件穿透传给父控件,即TextField;

在MouseArea加入两行代码:

propagateComposedEvents: true     
onPressed: { mouse.accepted = false } 

在这里插入图片描述
代码加上后,运行TextField可以正常输入文本了!

最后再优化一下,鼠标指针进入后,修改一下:

Window {id: rootvisible: truewidth: 600height: 400title: qsTr("Hello World")TextField {id: pwdTextFieldwidth: 400height: 40font.pixelSize: height / 2placeholderText: "请输入密码"            // 背景提示文本placeholderTextColor: "#303037"         // 提示文本颜色verticalAlignment: Text.AlignVCenter    // 文本垂直居中anchors.centerIn: parentbackground: Rectangle {anchors.fill: parentradius: pwdTextField.height / 2color: "#CCFFFF"border.width: 1border.color: pwdTextField.focus ? "#FF66FF" : "#222"MouseArea {anchors.fill: parent        // 填充满父控件hoverEnabled: true// 鼠标穿透,按下事件不接收,传递给父控件propagateComposedEvents: trueonPressed: {mouse.accepted = false}onEntered: {parent.border.color = "#FF66FF"cursorShape = Qt.IBeamCursor}onExited: {parent.border.color = pwdTextField.focus ? "#FF66FF" : "#222"cursorShape = Qt.ArrowCursor}}}}
}

在这里插入图片描述

http://www.lryc.cn/news/615147.html

相关文章:

  • 从免费到盈利:Coze智能体1小时封装变现全流程指南——井云科技
  • 云服务器--阿里云OSS(2)【Springboot使用阿里云OSS】
  • 81 keil仿真调试记录
  • C++11中的移动语义
  • 优化器:SGD、Adam、RMSprop等优化算法对比与机器翻译应用
  • day 16 stm32 IIC
  • 【Java EE初阶 --- 网络原理】JVM
  • 堆----3.数据流的中位数
  • 【Redis】Redis-plus-plus的安装与使用
  • 自定义通知组件跟随右侧边栏移动
  • SQL基本
  • 探索Trae:使用Trae CN爬取 Gitbook 电子书
  • 2025-08-09 李沐深度学习14——经典卷积神经网络 (2)
  • 生态问题是什么?
  • P1890 gcd区间
  • 如何理解SA_RESTART”被信号中断的系统调用自动重启“?
  • SELinux 入门指南
  • ROS2 多线程 与组件机制
  • Python NumPy入门指南:数据处理科学计算的瑞士军刀
  • Qt 的对象线程亲和性规则
  • 华为欧拉OpenEnler系统在启动MindIE时权限问题的解决方法
  • 从灵感枯竭到批量产出:无忧秘书创作平台如何重构内容生产者的工作流程?全环节赋能分析
  • Spring Boot 集成 Quartz 实现定时任务(Cron 表达式示例)
  • WinForm 中 ListView 控件的实战应用与功能拓展
  • kafka架构原理快速入门
  • AI大语言模型在生活场景中的应用日益广泛,主要包括四大类需求:文本处理、信息获取、决策支持和创意生成。
  • 软件定义车辆加速推进汽车电子技术
  • Blender 快捷键速查表 (Cheat Sheet)
  • 【线性代数】6二次型
  • 可直接运行的 Playwright C# 自动化模板