立即注册 找回密码

微雪课堂

搜索
微雪课堂 树莓派 树莓派QT教程 查看内容

树莓派Qt系列教程9:鼠标事件

2020-7-18 13:20| 发布者: dasi| 查看: 478| 评论: 0|原作者: dasi

摘要: 这一节将学习QML中的鼠标事件

前言

上一节中我们在信号和槽的例程中,涉及到了鼠标事件的使用,所以这一节我们来讲一下QML中的事件处理。在Qt中处理事件有多种方法,我们先来讲一下鼠标事件。

事件

事件是什么意思呢?我们可以简单将其理解为系统或者Qt本身在不同时刻发出的事情或者动作的统称。当用户按下鼠标,敲击键盘,或者是窗口需要重新绘制时,都会发出一个相应的事件。一些事件在对用户操作做出响应时发出,如键盘事件;另一些则是由系统自动发出的,如计时器事件。

对于初学的小伙伴,总是容易将上一节中的信号和事件的概念混淆,其实,只要记住事件比信号更底层就可以了。举个例子来说,我们用鼠标按下界面上的一个按钮,它会发射clicked()信号,但是,它怎么知道自己被按下了呢?这就是通过鼠标事件处理的。

鼠标事件

QML的鼠标事件是通过不可见元素MouseArea来实现,先来看一下它有哪些属性:

  • acceptedButtons: 指定处理哪个按键,如LeftButton 、Qt.RightButton等
  • enabled:设置是否启用鼠标处理,默认为true
  • pressed:鼠标按下时为true
  • pressedButtons:保存按下的鼠标键
  • containsMouse:记录光标是否在当前的MouseArea
  • cursorShape:用来设置光标形状
  • mouseX/mouseY:保存光标在MouseArea中的X/Y坐标
  • preventStealing:为true时可以防止当前鼠标事件被其它对象拦截
  • propagateComposedEvents:默认为false,为true时可以传递鼠标事件
  • hoverEnabled:默认false,只有按下鼠标键时才处理鼠标事件,为true时即使没有按下鼠标键也会作相应的处理
  • 信号:canceled()、clicked()、doubleClicked()、 pressed() released()等

MouseEvent

看一个简单的处理鼠标事件的例子,学习一下MouseArea如何使用,新建Qt Quick项目

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("event")

    Rectangle{
        id: rect
        anchors.fill: parent
        color:"green"

        MouseArea{
            //父元素的整个区域都能触发MouseArea事件
            anchors.fill:parent
            //接收左键和右键
            acceptedButtons:Qt.LeftButton | Qt.RightButton;
            //鼠标单击事件
            onClicked: {
                if(mouse.button === Qt.RightButton)
                {
                    Qt.quit();
                }else if(mouse.button === Qt.LeftButton)
                {
                    rect.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
                }
            }
            //鼠标双击事件
            onDoubleClicked: {
                console.log("点了我两次了!!!")
            }
        }
    }
}

实现的效果很简单,和上节中的信号和槽类似,只不过这次是在窗口上点击鼠标左键,实现窗体颜色的变换;点击鼠标右键,程序退出;双击鼠标左键,输出“点了我两次了”。

新建绿色矩形充满窗体,在其中建立鼠标对象,设置处理哪些按键。在MouseArea中使用了onClicked和onDoubleClicked两个信号处理程序,它们对应MouseArea的Clicked和DoubleClicked信号。运行效果如下:

鼠标拖拽

MouseArea中的drag分组属性提供了一个使项目可以拖动的简单方法。属性如下:

  • drag.target:要拖拽对象的id。
  • drag.active:记录目标对象是否正在被拖拽。
  • drag.axis:设置拖拽方向,可以是Drag.XAxis/YAxis/XAndYAxis。
  • drag.minimumX/drag.maximumX:设置X方向可拖拽距离。
  • drag.minimumY/drag.maximumY:设置Y方向可拖拽距离。
  • drag.filterChildren:为true时,鼠标事件可被父对象接收。
  • drag.threshold:像素阈值,平台相关。

这个在界面开发中可能不是很常用,但是效果还是蛮有趣的,我们也是通过一个例程感受一下。

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("event")

    Rectangle{
        id:rect
        anchors.centerIn: parent
        width: 200
        height: 200
        color: "gray"
        Rectangle{
            id:smallrect
            width: 50
            height: 50
            color:"black"
            opacity: (rect.width - smallrect.x)/600
            MouseArea{
                anchors.fill: parent
                drag.target: parent
                drag.axis: Drag.XAndYAxis
                drag.minimumX: 0
                drag.minimumY: 0
                drag.maximumX: rect.width - smallrect.width
                drag.maximumY: rect.height - smallrect.height
            }
        }
    }
}

窗口上定义两个嵌套的矩形,这里用到了一个新的属性opacity。此属性保留项目的不透明度。不透明度指定为介于0.0(完全透明)和1.0(完全不透明)之间的数字。设置拖拽对象为小矩形,拖拽方向为XAndYAxis,分别设置x/y方向上的拖拽范围。其实就是只能在大矩形中拖拽,且透明度会随着小矩形x坐标的增大越来越小。效果如下:

总结

鼠标事件和信号与槽一样,也是在qt开发中至关重要的。它的用法很多很杂,这一节只是带大家入门,还有很多很有趣的用法,希望大家自己探索哦!
Tab标签: 树莓派 Qt

40

顶一下

刚表态过的朋友 (40 人)

相关阅读

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2020-11-28 19:52 , Processed in 0.013935 second(s), 13 queries .

返回顶部