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 系统调色板的访问，并用于给按钮一个更原生的外观和感觉。

请注意，《code translate="no">Item、Button 和 Text 类型使用的锚点是以组（点）表示法设置的，以提高可读性。

添加 `Button` 和 `Block` 组件

以上代码中的 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() 处理程序，以向 container 发射 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

QML 高级教程 QML 高级教程 2 - 填充游戏画布

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

创建应用程序屏幕

添加 Button 和 Block 组件

添加 `Button` 和 `Block` 组件