第14章：QML之KeyEvent

1，按键事件
2，源码

import QtQuick 2.6
Rectangle {
    property alias mouseArea: mouseArea

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    Row{
        x: 50; y: 50
        spacing: 30

        Rectangle{
            id: music
            width: 100; height: 100
            radius: 6
            color: focus ? "red" : "lightgray"          //被选中时变红色或者变灰色
            scale: focus ? 1.0 : 0.8                    //被选中是图标变大
            focus: true
            KeyNavigation.tab: play
            Keys.onUpPressed: music.y    -= 10             //上移
            Keys.onDownPressed: music.y  += 10             //下移
            Keys.onLeftPressed: music.x  -= 10             //左移
            Keys.onRightPressed: music.x += 10             //右移

            Text{
                anchors.centerIn: parent
                color: parent.focus ? "black" : "gray"     //被选中时显示黑字，否则变灰
                font.pointSize: 20                         //字体大小
                text: "音乐"                                //文字内容为音乐
            }
        }

        Rectangle{
            id: play
            width: 100; height: 100
            radius: 6
            color: focus ? "green" : "lightgray"
            scale: focus ? 1 : 0.8
            KeyNavigation.tab: movie                       //将焦点移动到影视图标
            Keys.onUpPressed:   play.y  -= 10
            Keys.onDownPressed: play.y  += 10
            Keys.onLeftPressed: play.x  -= 10
            Keys.onRightPressed: play.x += 10

            Text{
                anchors.centerIn: parent
                color: parent.focus ? "black" : "gray"
                font.pointSize: 20
                text : "游戏"
            }
        }

        Rectangle{
            id: movie
            width: 100; height: 100
            radius: 6
            color: focus ? "blue" : "lightgray"
            scale: focus ? 1.0 : 0.8
            KeyNavigation.tab: music                        //将焦点移动到 music上
            Keys.onPressed: play.y      -= 10
            Keys.onDownPressed: play.y  += 10
            Keys.onLeftPressed: play.x  -= 10
            Keys.onRightPressed: play.x += 10

            Text{
                anchors.centerIn: parent
                color: parent.focus ? "black" : "gray"
                font.pointSize: 20
                text: "影视"
            }
        }
    }
}

3，效果