Erste Schritte mit QML

Erstellen eines QML-Dokuments

Ein QML-Dokument definiert eine Hierarchie von Objekten mit einem gut lesbaren, strukturierten Layout. Jedes QML-Dokument besteht aus zwei Teilen: einem Importteil und einem Objektdeklarationsteil. Die für Benutzeroberflächen gebräuchlichsten Typen und Funktionen werden im QtQuick import bereitgestellt.

Importieren und Verwenden des QtQuick-Moduls

Zur Verwendung des Qt Quick Modul zu verwenden, muss ein QML-Dokument es importieren. Die Importsyntax sieht wie folgt aus:

import QtQuick

Die Typen und die Funktionalität, die Qt Quick bietet, können nun im QML-Dokument verwendet werden!

Definieren einer Objekthierarchie

Die Objektdeklaration in einem QML-Dokument legt fest, was in der visuellen Szene angezeigt wird. Qt Quick Die Objekthierarchie liefert die grundlegenden Bausteine für alle Benutzeroberflächen, wie z. B. die Objekte für die Anzeige von Bildern und Text und für die Verarbeitung von Benutzereingaben.

Eine einfache Objektdeklaration könnte ein farbiges Rechteck sein, in dem ein Text zentriert ist:

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

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

Dies definiert eine Objekthierarchie mit einem Wurzelobjekt Rectangle, das ein Kindobjekt Text hat. Die parent des Text Objekts wird automatisch auf die Rectangle gesetzt, und in ähnlicher Weise wird das Text Objekt von QML zur children Eigenschaft des Rectangle Objekts hinzugefügt.

Alles zusammenfügen

Die im obigen Beispiel verwendeten Typen Rectangle und Text werden beide durch den Import von QtQuick bereitgestellt. Setzt man den Import und die Objektdeklaration zusammen, erhält man ein vollständiges QML-Dokument:

import QtQuick

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

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

Wenn wir dieses Dokument als "HelloWorld.qml" speichern, können wir es laden und anzeigen.

Erstellen und Ausführen von QML-Projekten

Um die durch das QML-Dokument definierte grafische Szene darzustellen, kann sie geladen werden mit Qt Creator. Für einfache UI-Dateien wie diese wählen Sie unter Qt CreatorDatei > Neue Datei oder Projekt > Anwendung (Qt Quick) > Qt Quick Anwendung - Leer.

Wenn Sie auf die grüne Schaltfläche Ausführen klicken, wird die Anwendung gestartet. Sie sollten den Text Hello, World! in der Mitte eines roten Rechtecks sehen.

Weitere Informationen über das Erstellen und Ausführen von Projekten in Qt Creator finden Sie auf den folgenden Seiten:

• Erstellen von Qt Quick Projekten
• Erstellen und Ausführen eines Beispiels

Erstellen von QML-Anwendungen mit Steuerelementen

Während Qt Quick grundlegende grafische Elemente bereitstellt, Qt Quick Controls fertige QML-Typen für die Verwendung in einer Anwendung zur Verfügung.

Das Einfügen des Typs ApplicationWindow ist ein guter Ausgangspunkt für die Erstellung von Anwendungen. Die Benutzeroberfläche einer Anwendung hat dieses grundlegende Layout:

Innerhalb jedes Bereichs können verschiedene Steuerelemente hinzugefügt und miteinander verbunden werden, um eine Anwendung zu bilden. Das folgende Beispiel ist eine einfache Anwendung, die die Nutzung des verfügbaren Platzes demonstriert:

//import related modules
import QtQuick
import QtQuick.Controls

//window containing the application
ApplicationWindow {

    visible: true

    //title of the application
    title: qsTr("Hello World")
    width: 640
    height: 480

    //menu containing two menu items
    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: console.log("Open action triggered");
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    //Content Area

    //a button in the middle of the content area
    Button {
        text: qsTr("Hello World")
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

Die Anwendung hat zwei Menüpunkte und eine Schaltfläche in der Mitte. Wenn Sie auf den Menüpunkt Exit klicken, wird die Anwendung geschlossen.

Außerdem gibt es verschiedene Navigationsmethoden und verschiedene Steuerelemente wie Schaltflächen und Schieberegler. Die folgenden Beispiele sind unter Qt Creator verfügbar und zeigen verschiedene Steuerelemente und Layouts.

• Grundlegende Layouts
• Qt Quick Controls - Galerie

Kopieren Sie die Schnipsel und fügen Sie sie in diese einfache Hello World-Anwendung ein, um zu sehen, wie QML funktioniert.

Behandlung von Benutzereingaben

Einer der großen Vorteile der Verwendung von QML zur Definition einer Benutzeroberfläche besteht darin, dass der Designer der Benutzeroberfläche mit einfachen JavaScript-Ausdrücken festlegen kann, wie die Anwendung auf Ereignisse reagieren soll. In QML bezeichnen wir diese Ereignisse als Signale, und diese Signale werden von Signalhandlern verarbeitet.

Betrachten Sie zum Beispiel das folgende Beispiel:

import QtQuick

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

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

    TapHandler {
        onTapped: parent.color = "blue"
    }
}

Dieses Beispiel kann als "ClickableHelloWorld.qml" gespeichert und mit qml, dem QML Runtime Tool, ausgeführt werden. Immer wenn der Benutzer auf eine beliebige Stelle des Fensters klickt, ändert sich die Farbe des Rechtecks von rot zu blau.

Tastatureingaben können auf ähnliche Weise mit einem einfachen Ausdruck behandelt werden:

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

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

    focus: true
    Keys.onPressed: {
        if (event.key == Qt.Key_Return) {
            color = "blue";
            event.accepted = true;
        }
    }
}

Wenn der Fokus akzeptiert wird, kann die Farbe auf blau geändert werden, wenn die Eingabetaste gedrückt wird.

Eigenschaftsbindungen

Objekte und ihre Eigenschaften bilden die Grundlage einer in einem QML-Dokument definierten grafischen Schnittstelle. Die QML-Sprache erlaubt es, Eigenschaften auf verschiedene Weise aneinander zu binden, was hochdynamische Benutzeroberflächen ermöglicht.

Im folgenden Beispiel ist die Geometrie jedes untergeordneten Rectangle an die des übergeordneten Rectangle gebunden. Würde sich die Geometrie des übergeordneten Rectangle ändern, würde sich die Geometrie jedes untergeordneten Rectangle aufgrund der Eigenschaftsbindungen automatisch aktualisieren.

Rectangle {
    width: 400
    height: 200

    Rectangle {
        width: parent.width / 2
        height: parent.height
        color: "blue"
    }

    Rectangle {
        width: parent.width / 2
        height: parent.height
        x: parent.width / 2
        color: "green"
    }
}

Animationen

Eigenschaften können auch über Animationen dynamisch aktualisiert werden. Der QtQuick -Import bietet verschiedene Animationstypen, die verwendet werden können, um Änderungen am Wert einer Eigenschaft zu animieren. Im folgenden Beispiel wird eine Eigenschaft animiert, die dann in einem Bereich von Text angezeigt wird:

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

    property int animatedValue: 0
    SequentialAnimation on animatedValue {
        loops: Animation.Infinite
        PropertyAnimation { to: 150; duration: 1000 }
        PropertyAnimation { to: 0; duration: 1000 }
    }

    Text {
        anchors.centerIn: parent
        text: parent.animatedValue
    }
}

Der angezeigte Wert variiert periodisch von 0 bis 150.

Definieren von benutzerdefinierten QML-Typen zur Wiederverwendung

Eines der wichtigsten Konzepte in QML ist das der Wiederverwendung von Typen. Eine Anwendung wird wahrscheinlich mehrere visuelle Typen haben, die sich alle ähneln (z. B. mehrere Drucktasten), und QML ermöglicht es, diese Art von Dingen als wiederverwendbare, benutzerdefinierte Typen zu definieren, um Code-Duplikation zu minimieren und die Lesbarkeit zu maximieren.

Stellen Sie sich zum Beispiel vor, dass der Entwickler einen neuen Typ MessageLabel in der Datei MessageLabel.qml definiert:

// MessageLabel.qml
import QtQuick

Rectangle {
    height: 50
    property string message: "debug message"
    property var msgType: ["debug", "warning" , "critical"]
    color: "black"

    Column {
        anchors.fill: parent
        padding: 5.0
        spacing: 2
        Text {
            text: msgType.toString().toUpperCase() + ":"
            font.bold: msgType == "critical"
            font.family: "Terminal Regular"
            color: msgType === "warning" || msgType === "critical" ? "red" : "yellow"
            ColorAnimation on color {
                running: msgType == "critical"
                from: "red"
                to: "black"
                duration: 1000
                loops: msgType == "critical" ? Animation.Infinite : 1
            }
        }
        Text {
            text: message
            color: msgType === "warning" || msgType === "critical" ? "red" : "yellow"
            font.family: "Terminal Regular"
        }
    }

}

Dieser Typ kann nun in der Anwendung mehrfach wiederverwendet werden, wie folgt:

// application.qml import QtQuick Column { width: 180 height: 180 padding: 1.5 topPadding: 10.0 bottomPadding: 10.0 spacing: 5 MessageLabel{ width: parent.width - 2 msgType: "debug" } MessageLabel { width: parent.width - 2 message: "This is a warning!" msgType: "warning" } MessageLabel { width: parent.width - 2 message: "A critical warning!" msgType: "critical" } }

Auf diese Weise werden modulare Benutzeroberflächentypen zusammengestellt und innerhalb einer Anwendung wiederverwendet.

Unter QML-Objektattribute finden Sie weitere Einzelheiten zur Entwicklung Ihrer eigenen wiederverwendbaren Komponenten.

Wie geht es jetzt weiter?

Jetzt, wo Sie QML in Aktion gesehen haben, können Sie den nächsten Schritt tun. Die folgende Seite wird Sie auf Ihrer Reise mit QML begleiten.

• QML-Anwendungen
• Qt Beispiele und Tutorials