【QT】QML的Key事件(Keys)详解

QML中的Keys元素提供了一些附加属性，之所以说是“附加属性”，是因为它与其它的QML元素用法不同。Keys是专门用来处理键盘事件KeyEvent的，它定义了许多针对特定按键的信号，例如digit0Pressed(KeyEventevent)、spacePressed(KeyEventevent)等，不过使用pressed(KeyEventevent)和released(KeyEventevent)这两个普通的信号就可以处理大部分按键事件了，信号的参数类型是KeyEvent，参数名是event，包含了按键的详细信息。

如果某个QML对象要响应按键事件，首先必须设置其focus属性为true，因为这个属性默认为false。一般情况下，我们处理了某个按键事件时，就会设置其event.accepted属性为true，这样做的目的是防止它的父对象稍后也处理同一个按键事件，即使父对象的focus没有设置为ture。

Keys有三个属性：enabled、forwardTo、prioriry。

enabled属性默认为true，为false时不能响应按键事件，影响的只是当前QML对象。Keys的enabled不同于Item的enabled，后者默认为true，为false时按键事件和鼠标事件都不能响应，影响的是当前对象及所有孩子对象，这一点在使用是需要特别注意。

forwardTo是个列表属性list，设置按键事件传递的顺序，某个QML对象在这个列表属性中时，即使没有设置focus为true也能响应按键事件，如果某个按键事件被列表属性中前面的Item处理了，后面的Item就不会再收到这个按键信号。

priority属性用来设置处理按键事件时的优先级，默认是Keys.BeforeItem，也就是说优先处理Keys附加属性的按键事件，然后才是Item本身的按键事件，但Keys已经处理过的按键事件就不会再传递到当前Item了，反之Keys.afterItem亦然。

下面是一个简单的例子，通过键盘上的方向键来运动黄色矩形：

import QtQuick 2.3

Rectangle {
width: 800; height: 480
color: “lightblue”

focus: true;
Keys.onEscapePressed: console.log("quit now?")
Keys.forwardTo: moveRect

Rectangle {
    id: moveRect
    width: 100; height: 100
    color: "yellow"

    Keys.onPressed: {
        switch(event.key) {
        case Qt.Key_Left:
            moveRect.x -= 10;
            break;
        case Qt.Key_Right:
            moveRect.x += 10;
            break;
        case Qt.Key_Up:
            moveRect.y -= 10;
            break;
        case Qt.Key_Down:
            moveRect.y += 10;
            break;
        default:
            return;
        }
        event.accepted = true
    }
}

}

另外，我们还可以通过KeyNavigation来实现类似于上例的效果，这个是专门用来处理方向键和Tab键的，下面是一个响应Tab键的例子：

import QtQuick 2.3

Grid {
width: 100; height: 100
columns: 2

Rectangle {
    id: one
    width: 50; height: 50
    color: focus ? "red" : "lightblue"
    focus: true
    KeyNavigation.tab: two
}
Rectangle {
    id: two
    width: 50; height: 50
    color: focus ? "red" : "lightblue"
    KeyNavigation.tab: four
}
Rectangle {
    id: three
    width: 50; height: 50
    color: focus ? "red" : "lightblue"
    KeyNavigation.tab: one
}
Rectangle {
    id: four
    width: 50; height: 50
    color: focus ? "red" : "lightblue"
    KeyNavigation.tab: three
}

https://blog.csdn.net/iEearth/article/details/42030115