QML-Tutorial für Fortgeschrittene 1 - Erstellen des Spielbildschirms und der Blöcke

Erstellen des Anwendungsbildschirms

Der erste Schritt besteht darin, die grundlegenden QML-Elemente in Ihrer Anwendung zu erstellen.

Zu Beginn erstellen wir unsere Same Game-Anwendung mit einem Hauptbildschirm wie diesem:

Dieser wird durch die Hauptanwendungsdatei samegame.qml definiert, die wie folgt aussieht:

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?"
        }
    }
}

Damit erhalten Sie ein grundlegendes Spielfenster, das die Hauptfläche für die Blöcke, eine Schaltfläche "Neues Spiel" und eine Punkteanzeige enthält.

Ein Element, das Sie hier vielleicht nicht erkennen, ist das Element SystemPalette. Es ermöglicht den Zugriff auf die Qt-Systempalette und wird verwendet, um der Schaltfläche ein natives Aussehen zu verleihen.

Beachten Sie, dass die Anker für die Typen Item, Button und Text aus Gründen der Lesbarkeit in Gruppennotation (Punkt) gesetzt sind.

Hinzufügen der Komponenten Button und Block

Das Element Button im obigen Code ist in einer separaten Komponentendatei namens Button.qml definiert. Um eine funktionale Schaltfläche zu erstellen, verwenden wir die QML-Typen Text und MouseArea innerhalb einer Rectangle. Hier ist der Button.qml -Code:

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
    }
}

Dieser definiert im Wesentlichen ein Rechteck, das Text enthält und angeklickt werden kann. Der MouseArea hat einen onClicked() Handler, der implementiert ist, um das clicked() Signal des container auszugeben, wenn der Bereich angeklickt wird.

In Same Game wird der Bildschirm mit kleinen Blöcken gefüllt, wenn das Spiel beginnt. Jeder Block ist nur ein Element, das ein Bild enthält. Der Blockcode ist in einer separaten Block.qml Datei definiert:

import QtQuick

Item {
    id: block

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

Im Moment tut der Block noch nichts, er ist nur ein Bild. Im weiteren Verlauf des Tutorials werden wir die Blöcke animieren und mit Verhaltensweisen versehen. Wir haben noch keinen Code zur Erstellung der Blöcke hinzugefügt; das werden wir im nächsten Kapitel tun.

Wir haben das Bild mit anchors.fill: parent auf die Größe des übergeordneten Elements eingestellt. Das bedeutet, dass das Bild automatisch auf die richtige Größe skaliert wird, wenn wir die Blöcke später im Lehrgang dynamisch erstellen und ihre Größe ändern.

Beachten Sie den relativen Pfad für die Eigenschaft source des Typs Image. Dieser Pfad bezieht sich auf den Speicherort der Datei, die den Typ Image enthält. Alternativ können Sie die Bildquelle auch auf einen absoluten Dateipfad oder eine URL, die ein Bild enthält, setzen.

Sie sollten mit dem bisherigen Code vertraut sein. Wir haben nur einige grundlegende Typen erstellt, um den Einstieg zu erleichtern. Als Nächstes werden wir die Spielfläche mit einigen Blöcken füllen.

Beispielprojekt @ code.qt.io