示例一：按键事件处理

最新推荐文章于 2024-11-13 23:10:49 发布

不要停止创作

最新推荐文章于 2024-11-13 23:10:49 发布

阅读量262

点赞数 8

分类专栏： QML 文章标签： qt

本文链接：https://blog.csdn.net/booleanint/article/details/140689292

版权

QML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目标

现在要实现以下功能：
敲击键盘的空格键时，在界面上显示敲击次数

步骤

创建一个Text控件，指定id，位置，text内容，以及可以保存次数的属性：

import QtQuick
import QtQuick.Controls

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

    Text {
        id: text
        x: 12; y: 12

        property int spacePressCount
        text: "space key pressed " + spacePressCount + " times"
        font.pixelSize: 14
    }

}

效果如下：
在这里插入图片描述
由于Text类型没有提供按键相关的函数，故从它的父类型找，它的父类型是Item，从Item的文档中可以看到事件处理相关的函数：
链接: https://doc.qt.io/qt-6.5/qml-qtquick-item.html
进一步找到Keys类型的文档，可以看到按键相关的信号函数：
https://doc.qt.io/qt-6.5/qml-qtquick-keys.html#spacePressed-signal
在这里插入图片描述
于是在qml中加入以下代码：

 Keys.onSpacePressed: {
            increment()
        }

        function increment() {
            spacePressCount = spacePressCount + 1
        }

此时按下键盘空格键，仍然没有反应，为什么呢？
原来Item中有一个focus属性，设置为true时才能获得焦点。
在这里插入图片描述
增加focus:true之后，按下空格键，即可不断增加按键次数。
还可以再增加一个onTextChanged属性，可在text发生变化的时候将其打印到控制台：

      onTextChanged: function(text) {
        console.log("text changed to: ", text)
        }

最终效果如下：
在这里插入图片描述