首页 > 代码库 > QML的Key事件(Keys)详解

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有三个属性:enabledforwardToprioriry

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

forwardTo是个列表属性list<Object>,设置按键事件传递的顺序,某个QML对象在这个列表属性中时,即使没有设置focustrue也能响应按键事件,如果某个按键事件被列表属性中前面的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
    }
}

QML的Key事件(Keys)详解