QML鼠标事件处理
程序员文章站
2024-01-02 12:38:10
...
QML鼠标事件处理
鼠标事件分为click,doubleClick,drag,hover等
笔记内容在QmlBook In Chinese.pdf文件的55页左右
click事件:
Image {
id: root
source: "images/background.PNG"
Image {
id: pole
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 50
source: "images/pole.PNG"
}
Image {
id: wheel
anchors.horizontalCenter: parent.horizontalCenter
source: "images/pinwheel.PNG"
Behavior on rotation {
NumberAnimation {
duration: 500
}
}
}
MouseArea {
anchors.fill: pole
onClicked: wheel.rotation += 180
}
}
使用MouseArea指定点击区域,其中,
anchors.fill设置点击的范围(对象),
onclicked设置点击后的进行的操作
pressed和released事件
Rectangle {
width: 400
height: 200
color: "lightblue"
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
text: "Press it"
font.pixelSize: 50
MouseArea {
anchors.fill: parent
onPressed: parent.color = "blue"
onReleased: parent.color = "red"
}
}
}
使用onPressed设置点击时将text的文本颜色设为蓝色,
onReleased设置释放点击时text的文本颜色为红色
指定点击的鼠标键,双击处理
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
text: "Press it"
font.pixelSize: 50
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if(mouse.button === Qt.RightButton)
parent.color = 'pink'
else
parent.color = 'red'
}
onDoubleClicked: {
parent.color = 'blue'
}
}
}
上面使用acceptedButtons: Qt.LeftButton | Qt.RightButton设置鼠标响应左键和右键,
并在onClicked中根据点击的鼠标键不同设置不同的颜色,添加doubleClicked事件
鼠标的悬停和属性
Rectangle {
id: rect2
anchors.top: rect1.bottom
anchors.topMargin: 5
width: 400
height: 200
color: "lightblue"
Rectangle {
x: 150
y: 50
width: 100
height: 100
color: mouse_area.containsMouse ? "red" : "blue"
MouseArea {
id: mouse_area
anchors.fill: parent
hoverEnabled: true
}
}
}
···
使用id.containMouse判断id为mouse_area的方块是否存在鼠标。
开启hover:hoverEnabled: true
推荐阅读
-
JavaScript事件处理程序(事件侦听器)_javascript技巧
-
jQuery 处理页面的事件详解_jquery
-
Jquery使用mouseenter和mouseleave事件实现鼠标经过弹出层且可以点击的示例代码分享
-
qml鼠标穿透属性
-
QML鼠标事件处理
-
Android的事件分发(dispatchTouchEvent),拦截(onInterceptTouchEvent)与处理(onTouchEvent)
-
JavaScript事件处理程序(事件侦听器)_javascript技巧
-
荐 jQuery事件处理
-
捕获浏览器关闭、刷新事件不同情况下的处理方法_javascript技巧
-
JavaScript中的事件处理_基础知识