QML 高级教程 1 - 创建游戏画布和方块

创建应用屏幕

第一步是创建您应用中的基本 QML 项目。

首先，我们创建一个类似于这样的主屏幕的 Same Game 应用程序

这是由主应用程序文件 samegame.qml 定义的，其外观如下

import QtQuick

Rectangle {
    id: screen

    width: 490; height: 720

    SystemPalette { id: activePalette }

    Item {
        width: parent.width
        anchors { top: parent.top; bottom: toolBar.top }

        Image {
            id: background
            anchors.fill: parent
            source: "pics/background.jpg"
            fillMode: Image.PreserveAspectCrop
        }
    }

    Rectangle {
        id: toolBar
        width: parent.width; height: 30
        color: activePalette.window
        anchors.bottom: screen.bottom

        Button {
            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
            text: "New Game"
            onClicked: console.log("This doesn't do anything yet...")
        }

        Text {
            id: score
            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
            text: "Score: Who knows?"
        }
    }
}

这为您提供了一个基本的游戏窗口，包括方块的主画布、一个“新游戏”按钮和一个计分显示。

你可能在这里不认识的一个项目是 SystemPalette 项目。这提供对 Qt 系统调色板的访问，并用于给按钮带来更本地的外观和感觉。

请注意，使用分组（点）标记设置了 Item、Button 和 Text 类型的锚点，以提高可读性。

添加“按钮”

和“方块”

组件

如上代码中的 Button 项在名为 Button.qml 的单独组件文件中定义。为了创建一个功能按钮，我们在一个 Rectangle 中使用 QML 类型 Text 和 MouseArea 来创建一个按钮。以下是 Button.qml 的代码

import QtQuick

Rectangle {
    id: container

    property string text: "Button"

    signal clicked

    width: buttonLabel.width + 20; height: buttonLabel.height + 5
    border { width: 1; color: Qt.darker(activePalette.button) }
    antialiasing: true
    radius: 8

    // color the button with a gradient
    gradient: Gradient {
        GradientStop {
            position: 0.0
            color: {
                if (mouseArea.pressed)
                    return activePalette.dark
                else
                    return activePalette.light
            }
        }
        GradientStop { position: 1.0; color: activePalette.button }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: container.clicked();
    }

    Text {
        id: buttonLabel
        anchors.centerIn: container
        color: activePalette.buttonText
        text: container.text
    }
}

这基本上定义了一个包含文本并可被点击的矩形。MouseArea 有一个 onClicked() 处理器，当区域被点击时，该处理器将发射 clicked() 信号。

在 Same Game 中，游戏开始时屏幕被小块填充。每个方块只是一个包含图像的项目。方块代码定义在一个单独的 Block.qml 文件中

import QtQuick

Item {
    id: block

    Image {
        id: img
        anchors.fill: parent
        source: "pics/redStone.png"
    }
}

目前，方块没有做任何事情；它只是一个图像。随着教程的进行，我们将给方块添加动画和行为的操作。我们还没有添加创建方块的代码；我们将在下一章中做这件事。

我们使用 anchors.fill: parent 将图像设置为与父 Item 的大小相同。这意味着当我们在教程的后半部分动态创建和调整块项目的大小时，图像会自动缩放到正确的尺寸。

请注意，图像类型的 source 属性的相对路径。此路径相对于包含图像的 Image 类型文件的位置。作为替代，您也可以将图像源设置为包含图像的绝对文件路径或 URL。

您应该熟悉到目前为止的代码。我们只是创建了一些基本的类型以开始。接下来，我们将用一些方块填充游戏画布。

示例项目 @ code.qt.io