Grundlagen der QML-Syntax

QML ist eine multiparadigmatische Sprache, die es ermöglicht, Objekte anhand ihrer Attribute sowie ihrer Beziehungen und Reaktionen auf Änderungen an anderen Objekten zu definieren. Im Gegensatz zu rein imperativem Code, bei dem Änderungen an Attributen und im Verhalten durch eine Reihe von Anweisungen ausgedrückt werden, die Schritt für Schritt verarbeitet werden, integriert die deklarative Syntax von QML Attribut- und Verhaltensänderungen direkt in die Definitionen einzelner Objekte. Diese Attributdefinitionen können dann imperativen Code enthalten, falls komplexes benutzerdefiniertes Anwendungsverhalten erforderlich ist.

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

Import-Anweisungen

Ein QML-Dokument kann am Anfang der Datei einen oder mehrere Importe enthalten. Ein Import kann eine der folgenden Formen annehmen:

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

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

Die allgemeine Form der verschiedenen Importe lautet 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 “.

Objektdeklarationen

Syntaktisch gesehen definiert ein QML-Codeblock einen Baum aus QML-Objekten, die erstellt werden sollen. Objekte werden mithilfe von Objektdeklarationen definiert, die den Typ des zu erstellenden Objekts sowie die Attribute beschreiben, die dem Objekt zugewiesen werden sollen. Jedes Objekt kann zudem untergeordnete Objekte mithilfe verschachtelter Objektdeklarationen deklarieren.

Eine Objektdeklaration besteht aus dem Namen des Objekttyps, gefolgt von einer geschweiften Klammer. Alle Attribute und untergeordneten Objekte werden dann innerhalb dieser Klammer deklariert.

Hier ist eine einfache Objektdeklaration:

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

Hiermit wird ein Objekt vom Typ „ Rectangle “ deklariert, gefolgt von geschweiften Klammern, die die für dieses Objekt definierten Attribute umfassen. Der Typ „ Rectangle “ wird vom Modul „ QtQuick “ bereitgestellt, 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 “ bereitgestellt werden, wie in der Dokumentation unter Rectangle beschrieben.)

Das oben genannte Objekt kann von der Engine geladen werden, wenn es Teil eines QML-Dokuments ist. Das heißt, wenn der Quellcode um eine Import-Anweisung ergänzt wird, die das Modul „ QtQuick “ importiert (um den Typ „ Rectangle “ verfügbar zu machen), wie im folgenden Beispiel gezeigt:

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, erstellt er ein „ Rectangle “-Objekt unter Verwendung des vom Modul „ QtQuick “ bereitgestellten Typs „ Rectangle “:

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

Offensichtlich ist das in diesem Beispiel deklarierte Objekt „ Rectangle “ in der Tat sehr einfach, da es lediglich einige wenige Eigenschaftswerte definiert. Um nützlichere Objekte zu erstellen, kann eine Objektdeklaration viele weitere Arten von Attributen definieren: Diese werden in der Dokumentation zu QML-Objektattributen behandelt. Darüber hinaus kann eine Objektdeklaration untergeordnete Objekte definieren, wie im Folgenden erläutert wird.

Unterobjekte

Jede Objektdeklaration kann untergeordnete Objekte durch verschachtelte Objektdeklarationen definieren. Auf diese Weise deklariert jede Objektdeklaration implizit einen Objektbaum, der eine beliebige Anzahl von untergeordneten Objekten enthalten kann.

Beispielsweise enthält die folgende Objektdeklaration „ Rectangle “ 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 untergeordnetes „ Gradient “-Objekt, das wiederum zwei untergeordnete „ GradientStop “-Objekte besitzt.

Beachten Sie jedoch, dass es sich hierbei 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 als Basistyp für die meisten QML-Typen dient, da die meisten QML-Objekte für die visuelle Darstellung vorgesehen sind. Beispielsweise sind sowohl „ Rectangle “ als auch „ Text “ auf „ Item “ basierende Typen, und im folgenden Beispiel 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 Text -Objekt im obigen Code auf seinen parent -Wert verweist, bezieht es sich dabei auf sein visuelles übergeordnetes Objekt und nicht auf das übergeordnete Objekt in der Objektbaumstruktur. In diesem Fall sind beide identisch: Das Objekt „ Rectangle “ ist sowohl im Kontext des QML-Objektbaums als auch im Kontext der visuellen Szene das übergeordnete Objekt des Objekts „ Text “. Während die Eigenschaft „ parent “ geändert werden kann, um das visuelle übergeordnete Objekt zu ändern, lässt sich das übergeordnete Objekt eines Objekts im Kontext des Objektbaums jedoch nicht über QML ändern.

(Beachten Sie außerdem, dass das Objekt „ Text “ deklariert wurde, ohne es einer Eigenschaft von „ Rectangle “ zuzuweisen – im Gegensatz zum vorherigen Beispiel, in dem ein „ Gradient “-Objekt 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 zum Konzept der visuellen Zuordnung mit dem Typ „ Item “ finden Sie in der Dokumentation zu visuellen über- und untergeordneten Elementen.

Kommentare

Die Syntax für Kommentare in QML ähnelt der von JavaScript:

• Einzeilige Kommentare beginnen mit // und enden am Zeilenende.
• 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 bei der Verarbeitung von QML-Code von der Engine ignoriert. Sie sind nützlich, um die Funktion eines Codeabschnitts zu erläutern, sei es als Referenz für später oder um die Implementierung anderen zu erklären.

Kommentare können auch dazu verwendet werden, die Ausführung von Code zu verhindern, was manchmal bei der Fehlersuche hilfreich ist.

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.