QML鼠标事件

news2024/9/28 17:34:41

QML中常用的事件有:

  1. 鼠标事件
  2. 键盘事件
  3. 拖拽事件
  4. 定时器

MouseArea(鼠标区域)

 MouseArea是一个不可见的项目,同、通常用来和一个可见的项目配合使用来为其提供鼠标处理。鼠标处理的逻辑可以包含在MouseArea项目中

常用的属性:

enabled是否开启鼠标区域(默认为true)

mouseX

mouseY

保存鼠标的位置
acceptedButtons设置接收的按钮(默认为Qt.LeftButton)
hoverEnabled是否开启悬停
pressAndHoldInterval 按下并保持的间隔(以毫秒为单位)
pressed保存是否已按下
pressedButtons保存按下的按钮(左键,右键,中间键)
scrollGestureEnabled滚动手势的开启(用于非鼠标设备)
preventStealing 此属性保存鼠标事件是否可能从此鼠标区域被盗
propagateComposedEvents此属性保存组合鼠标事件是否将自动传播到与此鼠标区域重叠但在可视堆叠顺序中较低的其他鼠标区域。默认情况下,此属性为 false。

常用信号:

canceled()当鼠标事件被取消时,将发出此信号
clicked(MouseEvent mouse)当鼠标单击时发出信号
doubleClicked(MouseEvent mouse)当鼠标双击时发出信号
entered()鼠标进入鼠标区域时发出信号
exited()鼠标退出鼠标区域时发出此信号
positionChanged(MouseEvent mouse)鼠标位置改变时发出该信号
pressAndHold(MouseEvent mouse)长按(800毫秒)鼠标发出此信号
pressed(MouseEvent mouse)鼠标按下时发出信号
released(MouseEvent mouse)鼠标释放时发出信号
wheel(WheelEvent wheel)此信号是在响应鼠标滚轮和触控板滚动手势时发出的

cursorShape(光标形状)

Qt.ArrowCursor(箭头光标)Qt.BlankCursor
Qt.UpArrowCursor(向上箭头光标)Qt.SplitVCursor
Qt.CrossCursor(十字光标)Qt.SplitHCursor
Qt.WaitCursor(等待光标)Qt.PointingHandCursor
Qt.IBeamCursor(波束光标)Qt.ForbiddenCursor
Qt.SizeVerCursor(版本光标)Qt.WhatsThisCursor
Qt.SizeHorCursorQt.BusyCursor
Qt.SizeBDiagCursorQt.OpenHandCursor
Qt.SizeFDiagCursorQt.ClosedHandCursor
Qt.SizeAllCursorQt.DragCopyCursor
Qt.DragMoveCursorQt.DragLinkCursor

点击和释放:

Rectangle{
        width:100
        height: 100
        color: "red"
        MouseArea{
            anchors.fill: parent;//覆盖父类
            onPressed:  {parent.color="green"}//点击时颜色变绿
            onReleased: {parent.color="red"}//释放时颜色变红
        }
    }

点击时变绿:                                                释放时变红:

 鼠标进入和离开:

Rectangle{
        width:100
        height: 100
        color: "red"
        MouseArea{
            anchors.fill: parent;//覆盖父类
            hoverEnabled: true//开启鼠标悬停
            onEntered: {parent.color="blue"}//鼠标进入时颜色变蓝
            onExited: {parent.color="yellow"}//鼠标离开时颜色变黄
        }
    }

 鼠标进入时:                                               鼠标离开时: 

  鼠标在图形中移动:

Rectangle{
        width:100
        height: 100
        color: "red"
        MouseArea{
            anchors.fill: parent;//覆盖父类
            hoverEnabled: true//开启悬停
            onPositionChanged: {//鼠标位置改变时输出位置
                console.log("鼠标的位置:",mouseX,mouseY);//输出鼠标的位置
            }
        }
    }

输出鼠标的位置: 

 长按和双击:

Rectangle{
        width:100
        height: 100
        color: "red"
        MouseArea{
            anchors.fill: parent;//覆盖父类
            onDoubleClicked: {
                parent.color="blue"
            }
            onPressAndHold: {
                parent.color="green"
            }
        }
    }

双击:                                                      长按: 

 设置接收的键:

Rectangle{
        width:100
        height: 100
        color: "red"
        MouseArea{
            anchors.fill: parent;//覆盖父类
            acceptedButtons: Qt.LeftButton|Qt.RightButton
            onClicked: {
                if(mouse.button==Qt.LeftButton)
                {
                    console.log("鼠标左键按下")
                }
                else if(mouse.button==Qt.RightButton)
                {
                    console.log("鼠标右键按下")
                }
                else{
                    console.log("其他按键按下")
                }
            }
        }
    }

设置组合键 :

Rectangle{
        width:100
        height: 100
        color: "red"
        MouseArea{
            anchors.fill: parent;//覆盖父类
            acceptedButtons: Qt.LeftButton|Qt.RightButton
            onClicked: {
                if((mouse.button==Qt.LeftButton)&&(mouse.modifiers&Qt.ShiftModifier))
                {
                    console.log("左键和Shift键同时按下")
                }
            }

        }
    }

 设置鼠标形状:

Rectangle{
        width:100
        height: 100
        color: "red"
        MouseArea{
            anchors.fill: parent;//覆盖父类
            cursorShape:Qt.IBeamCursor
        }
    }

propagateComposedEvents(组合传播事件)

保存组合鼠标事件是否将自动传播到与此鼠标区域重叠但在可视堆叠顺序中较低的其他鼠标区域。默认情况下,此属性为 false。

如果传播复合事件设置为 true,则组合事件将自动传播到场景中同一位置的其他鼠标区域。每个事件都按堆叠顺序传播到其下方的下一个启用的 MouseArea,向下传播此可视层次结构,直到 MouseArea 接受该事件。与事件不同,如果不存在处理程序,则不会自动接受组合事件

 简单的讲就是控件有重复时,点击上层是否会往下执行。

当不开起组合事件传播时:

Rectangle{
        width:100
        height: 100
        color: "red"
        MouseArea{
            anchors.fill: parent;//覆盖父类
            onClicked: {console.log("clicked red")}
        }
        Rectangle{
            color: "blue"
            width: 50
            height: 50
            x:25
            y:25
            MouseArea{
                anchors.fill: parent
                //propagateComposedEvents: true//设置传播事件为true
                onClicked: {
                    console.log("clicked blue")
                    mouse.accepted=false
                }
            }
        }
    }

点击红色区域:                                                         点击蓝色区域

 由此可见,上层执行完并不会往下层运行。

开启组合传播事件:

Rectangle{
        width:100
        height: 100
        color: "red"
        MouseArea{
            anchors.fill: parent;//覆盖父类
            onClicked: {console.log("clicked red")}
        }
        Rectangle{
            color: "blue"
            width: 50
            height: 50
            x:25
            y:25
            MouseArea{
                anchors.fill: parent
                propagateComposedEvents: true//设置传播事件为true
                onClicked: {
                    console.log("clicked blue")
                    mouse.accepted=false
                }
            }
        }
    }

 点击红色区域:                                            点击蓝色区域:

 由此可见,上层的执行完会往下层执行。

鼠标拖拽:

drag.active拖拽活动
drag.target拖动目标
drag.axis

拖动轴

Drag.XAxis    水平

Drag.YAxis     竖直

Drag.XAndYAxis    水平和竖直

drag.filterChildren拖动的filter子项
drag.maximumX拖动最大的X
drag.maximumY拖动最大的Y
drag.minimumX拖动最小的X
drag.minimumY拖动最小的Y
drag.smoothed拖动平滑
drag.threshold拖动阈值

 使用流程:

  • drag.target 设置拖动目标
  • drag.active 指定当前是否正在拖动目标项
  • drag.axis  指定拖动是可以水平 ()、垂直 () 还是两者

拖动矩形:

Rectangle{
        id:rect1
        width:100
        height: 100
        color: "red"
        MouseArea{
            anchors.fill: parent;//覆盖父类
            drag.target: rect1 //指定拖动目标
            drag.axis: Drag.Drag.XAndYAxis //水平和垂直都能拖动
            drag.minimumX:0//设置最小X位置
            drag.minimumY: 0//设置最小Y位置
        }
    }

添加子对象:

Rectangle {
        width: 480
        height: 320
        Rectangle {
            id:rect1
            x: 30; y: 30
            width: 300; height: 240
            color: "lightsteelblue"

            MouseArea {
                anchors.fill: parent
                drag.target: parent;
                drag.axis: "XAxis"
                drag.minimumX: 30
                drag.maximumX: 150
                drag.filterChildren: true//添加一个子对象

                Rectangle {
                    color: "yellow"
                    x: 50; y : 50
                    width: 100; height: 100
                    MouseArea {
                        anchors.fill: parent
                        drag.target: parent;
                        drag.axis: "XAxis"
                    }
                }
            }
        }
    }

 

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

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

相关文章

【设计模式】原型模式与建造者模式

原型模式 原型模式是指通过原型实例指定创建对象的种类,然后通过拷贝的方式创建新的对象。属于创建型模式 原型模式的核心在于拷贝原型对象,主要用于对对象的复制。当你需要通过一大段get/set方法去构建对象的时候,就可以考虑使用原型模式了…

手牵手教Docker部署Springboot+vue ,全过程十分详细,轻松完成项目部署(简单,高效,通用)

手把手教Docker部署Springbootvue ,详细全过程,轻松完成项目部署(简单,高效) 上线前准备 腾讯云的服务器,服务器安装好docker 和docker-compose 最好事先了解技术 nginxdocker-compose 整体编排 后端部…

【C++】Visual Studio C++ 配置并使用gtest(不好用你捶我)

文章目录 相信大家都能感受到Visual Studio C 编辑器链接 lib 或 dll文件是一件非常头疼的事情。配置gooleTest的过程也不例外。 市面上很多教程,要么就不全,要么就缺少一些细节,导致我自己再配置的过程中,踩了很多坑。今天就记录…

用不同的思路实现括号匹配(java)

给定一个只包括 (,) 的字符串,判断字符串是否有效。 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 以上就是题目要求 利用替换的思想 ()()()()()()()(())例如需要判断例子中的括号是否有效,用替换的思想具体就是 将字…

力扣sql简单篇练习(二十一)

力扣sql简单篇练习(二十一) 1 使用唯一标识符替换员工ID 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 1.2 示例sql语句 # Write your MySQL query statement below SELECT e2.unique_id,e1.name FROM Employees e1 LEFT JOIN EmployeeUNI e2 ON e1.ide2.id1.3 运行…

使用netlify实现自动化部署前端项目(无服务器版本)

介绍 本文以 github仓库进行介绍关联netlify的无服务前端自动化部署。用途:个人网站设计、小游戏等当然这只是让你入门~具体细节等待你自己去探索 实现 打开官方网站 如果没有注册过的账户,你需要使用 github 去进行登录。注册完成后会自动给你提示填…

有关Windows域信任关系的一系列知识

简单的总结了一下来自这篇文章的知识点 https://www.kroll.com/-/media/kroll/pdfs/publications/rootedcon2019-pentesting-active-directory-forests-carlos-garcia.pdf 视频录像为 https://www.youtube.com/watch?v6aV5tZlQ2EQ&t10s&themeRefresh1 森林 域是由树和…

项目管理的工作内容有哪些?

首先,什么是项目管理? 项目管理是为了交付项目成果,包括“规划(尤其关注估算)——实施——确保成功”。项目管理可以用在所有事情上,当然,这个定义听起来可能还不够清晰,但它的好处…

华为机试题:HJ91 走方格的方案数(python)

文章目录(1)题目描述(2)Python3实现(3)知识点详解1、input():获取控制台(任意形式)的输入。输出均为字符串类型。1.1、input() 与 list(input()) 的区别、及其相互转换方…

剑指offer06.从尾到头打印链表

题目描述 解题思路 遍历链表&#xff0c;依次将元素压入栈中。然后依次弹出栈顶元素&#xff0c;存入数组返回。程序 class Solution { public:vector<int> reversePrint(ListNode* head) {ListNode *phead;stack<int> s1;while(p!NULL) //遍历链表&#xff0c;元…

jetson-Linux上 python 部署yolov5报错总结

第一个问题&#xff1a;python报错 illegal instruction报错先上图这报错&#xff0c;emmmmm&#xff0c;我是小白&#xff0c;多谢大佬的笔记&#xff0c;帮我解决了&#xff0c;虽然我也没搞懂。。。。嘿嘿具体解决办法就是&#xff1a;临时运行代码&#xff1a;1-在运文件前…

优雅停止 SpringBoot 服务,拒绝 kill -9 暴力停止

在使用 SpringBoot 的时候&#xff0c;都要涉及到服务的停止和启动&#xff0c;当我们停止服务的时候&#xff0c;很多时候大家都是kill -9 直接把程序进程杀掉&#xff0c;这样程序不会执行优雅的关闭。而且一些没有执行完的程序就会直接退出。 我们很多时候都需要安全的将服…

SAP 采购定价过程字段解析

下面我们针对每一个字段进行解释和用途分析 &#xff1a; 1、 步骤&#xff1a;代表了创建PO时&#xff0c;哪个条件类型放到前面&#xff0c;哪个放到后面&#xff0c;如果步骤号相同&#xff0c;那就以谁先选择出来谁就在前面。 2、 计数&#xff1a;没有任何实际意义&a…

web,h5海康视频接入监控视频流记录二(后台node取流)

首先将自己的appkey,secret以及对应参数填上&#xff0c;看看是否能够取流成功。 ws取流是需要开通559端口的&#xff0c;可以联系海康技术开放&#xff0c;以及mgc需要升级版本。 普通模式的话 需要升级mgc到5.13.102版本&#xff0c;可以找下现场技术帮你升级&#xff0c;先…

Java | IO 模式之 JavaBIO 应用

文章目录IO模型Java BIOJava NIOJava AIO&#xff08;NIO.2&#xff09;BIO、NIO、AIO的使用场景BIO1 BIO 基本介绍2 BIO 的工作机制3 BIO 传统通信实现3.1 业务需求3.2 实现思路3.3 代码实现4 BIO 模式下的多发和多收消息4.1 业务需求4.2 实现思路4.3 代码实现5 BIO 模式下接收…

大V龚文祥造谣董明珠恋情被禁言

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 因造谣董明珠与王自如恋情&#xff0c;知名大V龚文祥老师被今日头条禁言。龚文祥说&#xff0c;69岁的董明珠&#xff0c;找了一个小自己34岁的男友&#xff0c;引的网友议论纷纷。 2月26日&#…

使用Python和OpenCV制作电影般的截屏相册!

目录 简介&#xff1a; 实现步骤&#xff1a; 代码说明&#xff1a; 报错error&#xff1a; 问题所在&#xff1a; 解决方法&#xff1a; 1&#xff09;卸载&#xff1a; 2&#xff09;重新安装&#xff1a; 3&#xff09;安装成功&#xff1a; 效果如下&#xff1a; 简…

DockQuery 天狼 v1.2.0 正式发布

DockQuery 天狼经过 2022 年的孵化&#xff0c;于 2022 年年底发布了第一个版本。 在春回大地万象更新之际&#xff0c;DockQuery 发布了 1.2.0 版本&#xff0c;也是我们公开招募第一批产品体验官的版本。 在这个版本中&#xff0c;DockQuery 主要专注以下几个主题&#xff…

电影《毒舌律师》观后感

上周看了《毒蛇律师》这部电影&#xff0c;讲述一位’大律师’在法庭为己方辩护&#xff0c;最终赢得辩护的故事。 &#xff08;1&#xff09;人之常情 说起法律相关&#xff0c;不禁会让人联想到讲法律相关知识的罗翔老师&#xff0c;平时也会看他相关视频&#xff0c;无论是亲…

开发中遇到的问题合集

集合相关 1.JDK版本冲突导致的报错 报错信息&#xff1a; Set.of、List.of、Path.of 如果在 JDK 1.8 的项目中使用 Set.of() 方法报错&#xff0c;可能是因为该方法是 JDK 9 中新增的&#xff0c;不被 JDK 1.8 所支持。 如果你需要在 JDK 1.8 中使用类似的功能&#xff0c;可…