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)

相关推荐
....4921 天前
antvX6节点全选后鼠标通过拖拉调整视图的展示位置
javascript·计算机外设·数据中台·antvx6
zhslhm3 天前
键盘屏蔽与联网控制小工具
计算机外设·电脑·联网程序管理·键盘屏蔽
x66ccff4 天前
【nvidia】Windows 双 A6000 显卡双显示器驱动更新问题修复
计算机外设
szpc16214 天前
60V单通道高精度线性恒流LED驱动器防60V反接SOD123封装
c语言·开发语言·单片机·嵌入式硬件·计算机外设
Alger_Hamlet4 天前
Mac电脑 鼠标右键助手 像windows的右键菜单
windows·macos·计算机外设
禁默6 天前
CSS基础:鼠标、文本与字体属性详解
前端·css·计算机外设
旧故新长6 天前
多台 Windows 电脑之间共享鼠标和键盘,并支持 剪贴板同步(复制粘贴)
计算机外设
zdlinux7 天前
ubuntu 2204键盘按键映射修改
计算机外设
uuuuu17116449 天前
如何自定义5x5键盘
计算机外设
布朗克1689 天前
macbook电脑如何清理键盘防止误触
macos·计算机外设·电脑·键盘清理·防止误触