QML-Tutorial für Fortgeschrittene 1 – Erstellen der Spielfläche und der Blöcke

Erstellen des Anwendungsbildschirms

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

Zunächst erstellen wir unsere „Same Game“-Anwendung mit einem Hauptbildschirm, der wie folgt aussieht:

Dies 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 Hauptspielfläche für die Blöcke, eine Schaltfläche „New Game“ und eine Punkteanzeige enthält.

Ein Element, das Ihnen hier vielleicht unbekannt ist, ist das Element „ SystemPalette “. Dieses ermöglicht den Zugriff auf die Qt-Systempalette und wird verwendet, um der Schaltfläche ein natives Erscheinungsbild zu verleihen.

Beachten Sie, dass die Anker für die Typen „ Item “, „ Button “ und „ Text “ aus Gründen der Lesbarkeit in der Gruppen- (Punkt-)Notation festgelegt 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 funktionsfähige Schaltfläche zu erstellen, verwenden wir die QML-Typen „ Text “ und „ MouseArea “ innerhalb eines „ Rectangle “. Hier ist der Code für „ 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
    }
}

Damit wird im Wesentlichen ein Rechteck definiert, das Text enthält und angeklickt werden kann. Der „ MouseArea “ verfügt über einen „ onClicked() “-Handler, der so implementiert ist, dass er das Signal „ clicked() “ des „ container “ auslöst, wenn auf den Bereich geklickt wird.

In „Same Game“ ist der Bildschirm zu Beginn des Spiels mit kleinen Blöcken gefüllt. Jeder Block ist lediglich 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"
    }
}

Derzeit führt der Block keine Aktion aus; er ist lediglich ein Bild. Im weiteren Verlauf des Tutorials werden wir die Blöcke animieren und ihnen Verhaltensweisen zuweisen. Wir haben noch keinen Code zum Erstellen der Blöcke hinzugefügt; dies werden wir im nächsten Kapitel tun.

Wir haben das Bild mithilfe von ` anchors.fill: parent` so eingestellt, dass es die Größe seines übergeordneten Elements annimmt. Das bedeutet, dass das Bild automatisch auf die richtige Größe skaliert wird, wenn wir die Blockelemente später im Tutorial dynamisch erstellen und ihre Größe anpassen.

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

Der bisherige Code sollte dir bereits vertraut sein. Wir haben gerade einige grundlegende Typen erstellt, um loszulegen. Als Nächstes werden wir die Spielfläche mit einigen Blöcken füllen.

Beispielprojekt @ code.qt.io