[置顶] qml自学笔记------自己写类似于劲舞团的按键小游戏（上）

QML（Qt Meta-Object Language，Qt元对象语言）是一个用来描述应用程序的用户界面的声明式语言。花了点时间看完霍亚飞的《Qt及Qt Quick开发实战精解》后，为了巩固一下的所学，自己写了一个类似于劲舞团的按键小游戏。游戏如下图，根据经过粉红色竖线图片的指示，按空格、上、下、左和右键，按对得分，按错不得分，游戏不多说，上代码！

首先主画面文件名：KeyGame.qml 

整个主画面用了五个组件，ScorePart：用于显示当前得分以及滑过的图片的数目；OperationPart：用于显示按下的键，例如当按下键盘的space键时游戏中的space键会变红，其他键同；DisplayPart：用于定时的随机滑过空格或箭头图片，当图片经过粉红色竖线时检测是否得分；另外两个组件就是“暂停/开始”和“重新开始”两个按键，功能如文字提示。

import QtQuick 1.1

Rectangle {
    id: mainWindow

    property int currentScore : 0
    property int currentNum : 0
    property int level: 3000

    width: 500
    height: 700

    ScorePart {
        id: scorePart

        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
    }

    OperationPart {
        id: operationPart

        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter

        DisplayPart {
            id: displayPart

            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    PauseButton {
        id: pauseButton

        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.right: parent.horizontalCenter
        anchors.rightMargin: 20
    }

    RestartButton {
        id: restartButton

        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.left: parent.horizontalCenter
        anchors.rightMargin: 20
    }
}

KeyGame.qml文件没有太多内容，主要是anchors的使用，每一个项目都可以认为有一组无形的“锚线”，分别是：left、horizontalCenter、right、top、verticalCenter、baseline和bottom。anchors布局相当于相对布局，而使用x，y等就是绝对布局。anchors布局不能与绝对布局混用！

接下来是第一部分ScorePart.qml

这部分非常简单，简单的来说就是一个矩形中有三个Text文本用于显示标题（hello world）、当前得分和当前滑过。

import QtQuick 1.1

Rectangle {
    width: parent.width; height: 100

    Text {
        id: title
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Hello World"
    }

    Text {
        id: score

        property string stringScore : "当前的分：%1".arg(mainWindow.currentScore)

        anchors.bottom: parent.bottom
        anchors.rightMargin: 30
        anchors.right: parent.horizontalCenter
        width: 200; height: 50
        font.pointSize: 20
        text: stringScore
    }

    Text {
        id: number

        property string stringNum : "当前滑过：%1".arg(mainWindow.currentNum)

        anchors.bottom: parent.bottom
        anchors.leftMargin: 30
        anchors.left: parent.horizontalCenter
        width: 200; height: 50
        font.pointSize: 20
        text: stringNum
    }
}

第二部分OperationPart.qml

这部分主要内容是对按键事件的处理，所有基于Item的可见元素都可以通过Keys附加属性来进行按键处理。按键事件是只会传递给有焦点的项目（focus = true），而且获得焦点的项目如果没有接收按键事件（event.accepted = true），那么事件会递归的传递到每一个项目的父项目，直到被接受，或者到达根项目。在主画面KeyGame.qml中我特意让DisplayPart作为OperationPart的子项目，目的就是让DisplayPart处理了按键事件后，不接收传递给OperationPart，否则OperationPart将收不到按键事件。OperationPart收到按键事件，处理完后将事件接收。

import QtQuick 1.1

Rectangle {
    width: parent.width
    height: 500
    focus: true

    Keys.onSpacePressed: {
        space.color = "red"; event.accepted = true
        //console.log("space key pressed !")
    }
    Keys.onUpPressed: {
        upDirection.color = "red"; event.accepted = true
        //console.log("up key pressed !")
    }
    Keys.onDownPressed: {
        downDirection.color = "red"; event.accepted = true
        //console.log("down key pressed !")
    }
    Keys.onLeftPressed: {
        leftDirection.color = "red"; event.accepted = true
        //console.log("left key pressed !")
    }
    Keys.onRightPressed: {
        rightDirection.color = "red"; event.accepted = true
        //console.log("right key pressed !")
    }
    Keys.onReleased: {
        space.color = "lightgreen"
        upDirection.color = "lightgreen"
        downDirection.color = "lightgreen"
        leftDirection.color = "lightgreen"
        rightDirection.color = "lightgreen"
        event.accepted = true
    }

    Rectangle {
        id: space

        width: 120; height: 40
        border.color: "yellow"
        border.width: 3
        radius: 10
        color: "lightgreen"
        anchors.right: parent.horizontalCenter
        anchors.rightMargin: 60
        anchors.top: parent.verticalCenter
        anchors.topMargin: 100

        Text {
            id: spaceText

            anchors.centerIn: parent
            color: "blue"

            text: "space"
            font.pointSize: 20
        }

    }

    Rectangle {
        id: direction

        width: 140; height: 140
        anchors.left: parent.horizontalCenter
        anchors.leftMargin: 60
        anchors.top: parent.verticalCenter
        anchors.topMargin: 50

        Rectangle {
            id: upDirection

            color: "lightgreen"
            width: 40; height: 40
            border.color: "yellow"
            border.width: 3
            radius: 10
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter

            Text {
                id: upDirectionText

                anchors.centerIn: parent
                color: "blue"

                text: "up"
                font.pointSize: 10
            }
        }

        Rectangle {
            id: leftDirection

            color: "lightgreen"
            width: 40; height: 40
            border.color: "yellow"
            border.width: 3
            radius: 10
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter

            Text {
                id: leftDirectionText

                anchors.centerIn: parent
                color: "blue"

                text: "left"
                font.pointSize: 10
            }
        }

        Rectangle {
            id: downDirection

            color: "lightgreen"
            width: 40; height: 40
            border.color: "yellow"
            border.width: 3
            radius: 10
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter

            Text {
                id: downDirectionText

                anchors.centerIn: parent
                color: "blue"

                text: "down"
                font.pointSize: 10
            }
        }

        Rectangle {
            id: rightDirection

            color: "lightgreen"
            width: 40; height: 40
            border.color: "yellow"
            border.width: 3
            radius: 10
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter

            Text {
                id: rightDirectionText

                anchors.centerIn: parent
                color: "blue"
                text: "right"
                font.pointSize: 10
            }
        }
    }
}