QML的Key事件(Keys)详解

QML中的Keys元素提供了一些附加属性，之所以说是“附加属性”，是因为它与其它的QML元素用法不同。Keys是专门用来处理键盘事件KeyEvent的，它定义了许多针对特定按键的信号，例如digit0Pressed(KeyEvent
event)、spacePressed(KeyEvent
event)等，不过使用pressed(KeyEvent
event)和released(KeyEvent
event)这两个普通的信号就可以处理大部分按键事件了，信号的参数类型是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<Object>，设置按键事件传递的顺序，某个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
    }
}