Grundlagen der QML-Syntax

QML ist eine Mehrparadigmensprache, die es ermöglicht, Objekte anhand ihrer Attribute und ihrer Beziehung zu anderen Objekten sowie ihrer Reaktion auf deren Änderungen zu definieren. Im Gegensatz zu rein imperativem Code, bei dem Änderungen an Attributen und Verhalten durch eine Reihe von Anweisungen ausgedrückt werden, die Schritt für Schritt abgearbeitet werden, integriert die deklarative Syntax von QML Attribut- und Verhaltensänderungen direkt in die Definitionen der einzelnen Objekte. Diese Attributdefinitionen können dann imperativen Code enthalten, wenn ein komplexes benutzerdefiniertes Anwendungsverhalten erforderlich ist.

Der QML-Quellcode wird im Allgemeinen von der Engine über QML-Dokumente geladen, bei denen es sich um eigenständige Dokumente mit QML-Code handelt. Diese können verwendet werden, um QML-Objekttypen zu definieren, die dann in einer Anwendung wiederverwendet werden können. Beachten Sie, dass Typnamen mit einem Großbuchstaben beginnen müssen, damit sie als QML-Objekttypen in einer QML-Datei deklariert werden können.

Import-Anweisungen

Ein QML-Dokument kann einen oder mehrere Importe am Anfang der Datei enthalten. Ein Import kann jedes der folgenden Elemente sein:

• ein QML-Modul
• ein relatives Verzeichnis, das Typ-Definitionen als QML-Dokumente enthält
• eine JavaScript-Datei

JavaScript-Dateiimporte müssen beim Import qualifiziert werden, damit auf die von ihnen bereitgestellten Eigenschaften und Methoden zugegriffen werden kann.

Die generische Form der verschiedenen Importe ist wie folgt:

• import <ModuleIdentifier> [<Version.Number>] [as <Qualifier>]
• import "<Directory>"
• import "<JavaScriptFile>" [as <ScriptIdentifier>]

Beispiele:

• import QtQuick 2.0
• import QtQuick.LocalStorage 2.0 as Database
• import "../privateComponents"
• import "somefile.js" as Script

Ausführliche Informationen zu QML-Importen finden Sie in der Dokumentation QML-Syntax - Importanweisungen.

Objekt-Deklarationen

Syntaktisch gesehen definiert ein QML-Codeblock einen Baum von zu erstellenden QML-Objekten. Objekte werden mit Hilfe von Objektdeklarationen definiert, die den Typ des zu erstellenden Objekts sowie die Attribute beschreiben, die dem Objekt zugewiesen werden sollen. Jedes Objekt kann auch untergeordnete Objekte durch verschachtelte Objektdeklarationen deklarieren.

Eine Objektdeklaration besteht aus dem Namen des Objekttyps, gefolgt von einer Reihe geschweifter Klammern. Innerhalb dieser geschweiften Klammern werden dann alle Attribute und Unterobjekte deklariert.

Hier ist eine einfache Objektdeklaration:

Rectangle {
    width: 100
    height: 100
    color: "red"
}

Hier wird ein Objekt des Typs Rectangle deklariert, gefolgt von einer Reihe geschweifter Klammern, die die für dieses Objekt definierten Attribute umfassen. Der Typ Rectangle ist ein Typ, der vom Modul QtQuick bereitgestellt wird, und die in diesem Fall definierten Attribute sind die Werte der Eigenschaften width, height und color des Rechtecks. (Dies sind Eigenschaften, die vom Typ Rectangle zur Verfügung gestellt werden, wie in der Dokumentation Rectangle beschrieben).

Das obige Objekt kann von der Engine geladen werden, wenn es Teil eines QML-Dokuments ist. Das heißt, wenn der Quellcode durch eine import-Anweisung ergänzt wird, die das Modul QtQuick importiert (um den Typ Rectangle verfügbar zu machen), wie unten beschrieben:

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "red"
}

Wenn der obige Code in eine .qml -Datei eingefügt und von der QML-Engine geladen wird, erzeugt er ein Rectangle -Objekt unter Verwendung des Rectangle -Typs, der vom QtQuick -Modul bereitgestellt wird:

Rectangle { width: 100; height: 100; color: "red" }

Das in diesem Beispiel deklarierte Objekt Rectangle ist in der Tat sehr einfach, da es nur ein paar Eigenschaftswerte definiert. Um nützlichere Objekte zu erstellen, kann eine Objektdeklaration viele andere Arten von Attributen definieren: Diese werden in der Dokumentation QML Object Attributes behandelt. Außerdem kann eine Objektdeklaration untergeordnete Objekte definieren, wie weiter unten beschrieben.

Untergeordnete Objekte

Jede Objektdeklaration kann durch verschachtelte Objektdeklarationen Unterobjekte definieren. Auf diese Weise deklariert jede Objektdeklaration implizit einen Objektbaum, der eine beliebige Anzahl von Unterobjekten enthalten kann.

Die unten stehende Objektdeklaration Rectangle enthält beispielsweise eine Objektdeklaration Gradient, die wiederum zwei Deklarationen GradientStop enthält:

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

Wenn dieser Code von der Engine geladen wird, erstellt sie einen Objektbaum mit einem Rectangle Objekt an der Wurzel; dieses Objekt hat ein Gradient Kindobjekt, das wiederum zwei GradientStop Kinder hat.

Beachten Sie jedoch, dass es sich um eine Eltern-Kind-Beziehung im Kontext des QML-Objektbaums handelt, nicht im Kontext der visuellen Szene. Das Konzept einer Eltern-Kind-Beziehung in einer visuellen Szene wird durch den Typ Item aus dem Modul QtQuick bereitgestellt, der der Basistyp für die meisten QML-Typen ist, da die meisten QML-Objekte für die visuelle Darstellung vorgesehen sind. Zum Beispiel sind Rectangle und Text beides Item-basierte Typen, und unten wurde ein Text Objekt als visuelles Kind eines Rectangle Objekts deklariert:

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, QML!"
    }
}

Wenn das Objekt Text im obigen Code auf seinen Wert parent verweist, bezieht es sich auf seinen visuellen Elternteil, nicht auf den Elternteil im Objektbaum. In diesem Fall sind sie ein und dasselbe: Das Rectangle Objekt ist das übergeordnete Objekt des Text Objekts sowohl im Kontext des QML-Objektbaums als auch im Kontext der visuellen Szene. Während jedoch die Eigenschaft parent geändert werden kann, um den visuellen Elternteil zu ändern, kann der Elternteil eines Objekts im Kontext des Objektbaums nicht von QML aus geändert werden.

(Beachten Sie außerdem, dass das Objekt Text deklariert wurde, ohne es einer Eigenschaft von Rectangle zuzuweisen, im Gegensatz zum früheren Beispiel, in dem ein Objekt Gradient der Eigenschaft gradient des Rechtecks zugewiesen wurde. Dies liegt daran, dass die Eigenschaft children von Item als Standardeigenschaft des Typs festgelegt wurde, um diese bequemere Syntax zu ermöglichen).

Weitere Informationen über das Konzept der visuellen Eltern schaft mit dem Typ Item finden Sie in der Dokumentation zur visuellen Elternschaft.

Kommentare

Die Syntax für Kommentare in QML ist ähnlich wie die von JavaScript:

• Einzeilige Kommentare beginnen mit // und enden am Ende der Zeile.
• Mehrzeilige Kommentare beginnen mit /* und enden mit */

Text {
    text: "Hello world!"    //a basic greeting
    /*
        We want this text to stand out from the rest so
        we give it a large size and different font.
     */
    font.family: "Helvetica"
    font.pointSize: 24
}

Kommentare werden von der Engine bei der Verarbeitung von QML-Code ignoriert. Sie sind nützlich, um zu erläutern, was ein Codeabschnitt tut, sei es als Referenz zu einem späteren Zeitpunkt oder um anderen die Implementierung zu erklären.

Kommentare können auch verwendet werden, um die Ausführung von Code zu verhindern, was manchmal nützlich ist, um Probleme aufzuspüren.

Text {
    text: "Hello world!"
    //opacity: 0.5
}

Im obigen Beispiel hat das Objekt Text eine normale Deckkraft, da die Zeile opacity: 0.5 in einen Kommentar umgewandelt wurde.