QML-键盘按键事件处理

键盘按键事件处理

键盘事件分为通用事件和专用事件

键盘按键事件主要是键盘的左右上下按键，enter，tab键等

---

按键导航

1.Tab键使用：组件之间的导航，使用tab键进行导航

Rectangle {
    id: rect1
    width: 200
    height: 112
    color: "lightblue"
    TextInput {
        id: name
        anchors.left: parent.left
        y: 16
        anchors.right: parent.right
        text: "Field 1"
        font.pixelSize: 32
        color: focus ? "black" : "blue"
        focus: false    //true
        KeyNavigation.tab: age
    }
    TextInput {
        id: age
        anchors.left: parent.left
        y: 64
        anchors.right: parent.right
        text: "Field 2"
        font.pixelSize: 32
        color: focus ? "black" : "gray"
        KeyNavigation.backtab: name
    }
}

KeyNavigation.tab: age，按下tab键，将焦点导航到id为age的组件。
同理，KeyNavigation.backtab: name，按下shift+tab键，焦点将返回id为name的组件

2.键盘左右键

Rectangle {
    id: rect2
    anchors.top: rect1.bottom
    anchors.topMargin: 5
    width: 400
    height: 200
    color: "black"
    Rectangle {
        id: leftRect
        x: 25
        y: 25
        width: 150
        height: 150
        color: focus ? "red" : "darkred"
        KeyNavigation.right: rightRect
        focus: false    //true
    }
    Rectangle {
        id: rightRect
        x: 225
        y: 25
        width: 150
        height: 150
        color: focus ? "#00ff00" : "green"
        KeyNavigation.left: leftRect
    }
}

KeyNavigation.right: rightRect, 按下键盘向右键，聚焦到id为rightRect的组件；同理：KeyNavigation.left: leftRect，将导航的leftRect组件。

---

键盘事件

1.通用事件

通用事件： 没有指定具体哪个按键的事件，比如：onPressed, onReleased, …
处理通用事件时，需要通知事件已经被处理了：
event.accepted = true
否则，这个事件将会传递下去；

Item {
    focus: true 
    Keys.onPressed: { 
            if (event.key == Qt.Key_Left) { 
            console.log("move left"); 

            // Must accept explicitly
            event.accepted = true; 
        }
    }
}

2.专用事件

专用事件：onReturnedPressed, onSelectPressed,
onVolumeUpPressed, …
专用事件默认就将事件处理了。

Item { 
    focus: true 
    // Accepts the event by default
    Keys.onLeftPressed: 
        console.log("move left")
}

---

例子

实现键盘左右键转动图片

Rectangle {
    id: rect3
    anchors.top: rect2.bottom
    anchors.topMargin: 5
    width: 400
    height: 400
    color: "black"
    Image {
        id: rocket
        x: 150; y: 150
        source: "images/rocket.jpg"

        //transform-origin是变形原点，原点就是元素绕着旋转或变形的点
        transformOrigin: Item.Left
    }
    Keys.onLeftPressed:
        rocket.rotation -= 10
    Keys.onRightPressed:
        rocket.rotation = (rocket.rotation + 10) % 360
    focus: true
}

---

练习题

• 制作一个用户界面，布局与下面的图类似。并支持以下特性： • 当 items获取焦点的时候，颜色发生改变
• 点击一个item，就让它获取焦点
• 焦点可以通过方向键改变

代码如下：

Rectangle {
    id: rect4
    anchors.left: rect1.right
    anchors.leftMargin: 5
    width: 400
    height: 400
    opacity: 1

    Grid {
        columns: 2
        spacing: 10
        width: parent.width
        height: parent.height
        Rectangle {
            id: rect4_lefttop
            width: 50
            height: 50
            color: focus ? "lightblue" : "darkblue"
            focus: true
            KeyNavigation.right: rect4_righttop
            KeyNavigation.down: rect4_leftbottom
            MouseArea {
                anchors.fill: parent
                onClicked: parent.focus = true;
            }
        }
        Rectangle {
            id: rect4_righttop
            width: 50
            height: 50
            color: focus ? "green" : "darkgreen"
            KeyNavigation.left: rect4_lefttop
            KeyNavigation.down: rect4_rightbottom
            MouseArea {
                anchors.fill: parent
                onClicked: parent.focus = true;
            }
        }

        Rectangle {
            id: rect4_leftbottom
            width: 50
            height: 50
            color: focus ? "gray" : "darkgray"
            KeyNavigation.up: rect4_lefttop
            KeyNavigation.right: rect4_rightbottom
            MouseArea {
                anchors.fill: parent
                onClicked: parent.focus = true;
            }
        }
        Rectangle {
            id: rect4_rightbottom
            width: 50
            height: 50
            color: focus ? "purple" : "darkpurple"
            KeyNavigation.up: rect4_righttop
            KeyNavigation.left: rect4_leftbottom
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    parent.focus = true;
                }
            }
        }
    }
}

• 使用Grid和Rectangle组成界面，space设置组件键间隔
• color: focus ? “purple” : "darkpurple"根据聚焦与否改变组件颜色
• 用KeyNavigation.left/right/up/down导航，将焦点转到响应的id的组件
• 在组件内使用MouseArea.onClicked: parent.focus = true, 使得点击组件时候聚焦，颜色改变

注意

• 如果不加parent.foucs: MouseArea.onCLiced: focus = true, 那么聚焦的不是当前的组件，而是根组件，颜色不会改变

QML__Nokia内部培训资料.pdf