QML 鼠标和键盘事件

学习目标:Qml 鼠标和键盘事件

学习内容

1、QML 鼠标事件处理QML 直接提供 MouseArea 来捕获鼠标事件,该操作必须配合Rectangle 获取指定区域内的鼠标事件,

2、QML 键盘事件处理,并且获取对OML直接通过键盘事件 Keys 监控键盘任意按键应的消息。

项目效果

键盘事件

鼠标事件

项目代码

键盘事件

javascript 复制代码
import QtQuick 2.12
import QtQuick.Window 2.12

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


    Rectangle{
        id:keyserctn
        anchors.centerIn: parent

        width: 450
        height: 200
        color: "green"

        // 不设置焦点,获取不了键盘事件
        focus: true

        //捕获键盘按键事件。
        Keys.onPressed: {
            //按下的按键的键值 相当于枚举的值 d:68
            console.log("key:"+event.key)
            //按下的按键的原生扫描码。 "A" 时,event.nativeScanCode 的值通常是 30。
            console.log("scancode:"+event.nativeScanCode)
            //按下的按键所对应的文本字符
            console.log("text:"+event.text)
        }
        //捕获特殊 tab键
        Keys.onTabPressed: {
            console.log("监控区域提示:你已经按下Tab键!")
        }
        //捕获特殊 空格键
        Keys.onSpacePressed: {
            console.log("监控区域提示:你已经按下空格键!")
        }
    }
}

鼠标事件

javascript 复制代码
import QtQuick 2.12
import QtQuick.Window 2.12

import QtQuick.Controls 2.0

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


    Rectangle{
        id :mouse
        anchors.centerIn: parent

        width: 450
        height: 200
        color: "red"

        radius: width/2

        //鼠标事件
        MouseArea{
            anchors.fill: parent //沾满
            //接受的按钮:全部
            acceptedButtons: Qt.AllButtons

            // 此属性为false,鼠标进入、离开、移动不能捕获到
            hoverEnabled: true

            onPositionChanged: {
                console.log("监控区域提示:你当前鼠标移动坐标为:("+mouseX+","+mouseY+")");
            }

            onClicked: {
                if(mouse.button===Qt.LeftButton){
                    console.log("监控区域提示:你已经按下鼠标左键!");
                }
                else if(mouse.button===Qt.RightButton){
                    console.log("监控区域提示:你已经按下鼠标右键!");
                }
                else if(mouse.button===Qt.MidButton){
                    console.log("监控区域提示:你已经按下鼠标中间键!");
                }
            }
            onDoubleClicked: {
                 console.log("监控区域提示:你已经双击按下鼠标!");
            }
        }

    }

}
最后附上源代码链接

对您有帮助的话,帮忙点个star

Qt demo: 学习qt过程 (gitee.com)

相关推荐
暴躁茹19 小时前
Qt 将触摸事件转换为鼠标事件(Qt4和Qt5及以上版本)
开发语言·qt·计算机外设
短尾黑猫2 天前
【Fedora 42】Linux内核升级后,鼠标滚轮失灵,libinput的锅?
linux·运维·计算机外设
不讲废话的小白2 天前
解锁高效Excel技能:摆脱鼠标,快速编辑单元格
计算机外设·excel
南棱笑笑生3 天前
20250715给荣品RD-RK3588开发板刷Android14时打开USB鼠标
android·计算机外设
TESmart碲视3 天前
显示器核心三要素详解:刷新率、分辨率、色深
物联网·游戏·计算机外设·电脑·智能硬件
景彡先生3 天前
STM32 USB开发详解:CDC虚拟串口与HID键盘鼠标(基于CubeUSB库)
stm32·嵌入式硬件·计算机外设
2345VOR3 天前
【C#地图显示教程:实现鼠标绘制图形操作】
开发语言·c#·计算机外设·地图显示鼠标交互
皮小白3 天前
Ubuntu24 辅助系统-屏幕键盘的back按键在网页文本框删除不正常的问题解决方法
计算机外设
开开心心_Every3 天前
可增添功能的鼠标右键优化工具
开发语言·pdf·c#·计算机外设·电脑·音视频·symfony
TESmart碲视7 天前
USB一线连多屏?Display Link技术深度解析
stm32·单片机·嵌入式硬件·物联网·计算机外设·电脑·智能硬件