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 Importabschnitt und einem Objektdeklarationsabschnitt. Die für Benutzeroberflächen am häufigsten verwendeten Typen und Funktionen werden im Import „ QtQuick “ bereitgestellt.

Importieren und Verwenden des QtQuick-Moduls

Um das Qt Quick Modul nutzen zu können, muss es in ein QML-Dokument importiert werden. Die Import-Syntax sieht wie folgt aus:

import QtQuick

Die Typen und Funktionen, die Qt Quick bereitstellt, können nun im QML-Dokument verwendet werden!

Definition einer Objekthierarchie

Die Objektdeklaration in einem QML-Dokument legt fest, was in der visuellen Szene angezeigt wird. Qt Quick bietet die grundlegenden Bausteine für alle Benutzeroberflächen, wie beispielsweise Objekte zur Darstellung von Bildern und Text sowie zur Verarbeitung von Benutzereingaben.

Eine einfache Objektdeklaration könnte ein farbiges Fenster sein, in dem Text zentriert angezeigt wird:

Window {
    width: 640
    height: 480
    visible: true
    color: "red"

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

Dies definiert eine Objekthierarchie mit einem Stammobjekt „ Window “, das ein untergeordnetes Objekt „ Text “ besitzt. Die Eigenschaft „ parent “ des Objekts „ Text “ wird automatisch auf „ Window “ gesetzt, und ebenso wird das Objekt „ Text “ von QML der Eigenschaft „ children “ des Objekts „ Window “ hinzugefügt.

Alles zusammenführen

Die im obigen Beispiel verwendeten Typen „ Window “ und „ Text “ werden beide durch den Import „ QtQuick “ bereitgestellt. Kombiniert man den Import und die Objektdeklaration, erhält man ein vollständiges QML-Dokument:

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    color: "red"

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

Wenn wir dieses Dokument unter dem Namen „HelloWorld.qml“ speichern, können wir es laden und anzeigen.

Erstellen und Ausführen von QML-Projekten

Um die im QML-Dokument definierte grafische Szene anzuzeigen, kann sie mit Qt Creatorgeladen werden. So erstellen Sie ein neues QML-Projekt in „ Qt Creator “:

1. Wählen Sie „ File “ > „ New Project “ > Qt Quick Application in „ Qt Creator “.
2. Geben Sie einen Namen für Ihr Projekt ein und wählen Sie einen Speicherort aus.
3. Wählen Sie die entsprechende Qt-Version aus und konfigurieren Sie optional die Versionskontroll-Einstellungen für das Projekt.
4. Überprüfen Sie die Zusammenfassung Ihrer Projekteinstellungen und fahren Sie fort, um den Projekt-Build abzuschließen.

Nach Abschluss des Vorgangs generiert „ Qt Creator “ die erforderlichen Dateien und öffnet das Projekt zur Entwicklung. Durch Klicken auf die grüne Schaltfläche „Ausführen“ wird die Anwendung gestartet. In der Mitte eines roten Rechtecks sollte der Text „Hello, World!“ angezeigt werden.

Weitere Informationen zum Erstellen und Ausführen von Projekten in „ Qt Creator “ finden Sie auf den folgenden Seiten:

• Qt Creator: „ Qt Quick -Anwendungen erstellen“
• Qt Creator: Tutorial: Erstellen und Ausführen

Erstellen von QML-Anwendungen mit Steuerelementen

Qt Quick stellt zwar grundlegende grafische Elemente bereit, Qt Quick Controls bietet es vorgefertigte QML-Typen zur Verwendung innerhalb einer Anwendung.

Das Einfügen des ApplicationWindow -Typs ist ein guter Ausgangspunkt für die Erstellung von Anwendungen. Die Benutzeroberfläche einer Anwendung weist folgendes grundlegendes Layout auf:

In jedem Bereich können verschiedene Steuerelemente hinzugefügt und miteinander verbunden werden, um eine Anwendung zu bilden. Das folgende Code-Schnipsel ist beispielsweise eine einfache Anwendung, die die Nutzung des verfügbaren Platzes veranschaulicht:

//import related modules
import QtQuick
import QtQuick.Controls

//window containing the application
ApplicationWindow {
    width: 640
    height: 480
    visible: true
    //title of the application
    title: qsTr("Hello World")

    //menu containing two menu items
    header: MenuBar {
        Menu {
            title: qsTr("&File")
            Action {
                text: qsTr("&Open...")
                onTriggered: console.log("Open action triggered")
            }
            MenuSeparator { }
            Action {
                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 verfügt über zwei Menüelemente und eine Schaltfläche in der Mitte. Ein Klick auf das Menüelement „ Exit “ schließt die Anwendung.

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

• Grundlegende Layouts
• Qt Quick Controls - Galerie

Sie können die Codeausschnitte gerne kopieren und in diese einfache „Hello World“-Anwendung einfügen, um zu sehen, wie QML funktioniert.

Verarbeitung von Benutzereingaben

Einer der großen Vorteile der Verwendung von QML zur Definition einer Benutzeroberfläche besteht darin, dass der Benutzeroberflächendesigner 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 Signal-Handlern verarbeitet.

Betrachten Sie zum Beispiel das folgende Beispiel:

import QtQuick

Window {
    id: root
    width: 200
    height: 100
    color: isRed ? "red" : "blue"
    visible: true

    property bool isRed: true  // Track the color state

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

    TapHandler {
        onTapped: root.isRed = !root.isRed  // Toggle state
    }
}

Dieses Beispiel kann als „ClickableHelloWorld.qml“ gespeichert und mit „ qml “, dem „QML Runtime “-Tool, ausgeführt werden. Immer wenn der Benutzer an einer beliebigen Stelle im Fenster klickt, wechselt die Farbe des Rechtecks von Rot zu Blau. Durch erneutes Antippen wird die Farbe wieder auf Rot zurückgesetzt.

Tastatureingaben lassen sich auf ähnliche Weise mit einem einfachen Ausdruck verarbeiten:

import QtQuick

Window {
    id: root
    width: 200
    height: 100
    color: "red"
    visible: true

    Text {
        id: myText
        anchors.centerIn: parent
        text: toggle ? "Hello, World!" : "Goodbye, World!"
        focus: true
        property bool toggle: true
        Keys.onReturnPressed: (event)=>{
            myText.toggle = !myText.toggle;
            event.accepted = true;
        }
    }
}

Nun wechselt der Text bei jedem Drücken der Eingabetaste zwischen „Hello, World“ und „Goodbye, World“.

Eigenschaftsbindungen

Objekte und ihre Eigenschaften bilden die Grundlage einer in einem QML-Dokument definierten grafischen Benutzeroberfläche. Die Sprache QML ermöglicht es, Eigenschaften auf verschiedene Weise miteinander zu verknüpfen, was hochdynamische Benutzeroberflächen ermöglicht.

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

import QtQuick

Window {
    id: root
    width: 200
    height: 100
    color: "red"
    visible: true


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

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

Animationen

Eigenschaften können auch dynamisch über Animationen aktualisiert werden. Der Import „ QtQuick “ stellt verschiedene Animationstypen bereit, mit denen Änderungen am Wert einer Eigenschaft animiert werden können. Im folgenden Beispiel wird eine Eigenschaft animiert, die anschließend in einem Bereich von „ Text “ angezeigt wird:

import QtQuick

Window {
    id: root
    width: 200
    height: 100
    color: "red"
    visible: true

    property int animatedValue

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

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

Der angezeigte Wert wechselt periodisch zwischen 0 und 150.

Definition benutzerdefinierter QML-Typen zur Wiederverwendung

Eines der wichtigsten Konzepte in QML ist die Wiederverwendung von Typen. Eine Anwendung verfügt wahrscheinlich über mehrere visuelle Typen, die sich alle ähneln (zum Beispiel mehrere Schaltflächen), und QML ermöglicht es, solche Elemente als wiederverwendbare, benutzerdefinierte Typen zu definieren, um Code-Duplikate zu minimieren und die Lesbarkeit zu maximieren.

Stellen Sie sich beispielsweise vor, der Entwickler definiert einen neuen Typ „ MessageLabel “ in der Datei „ MessageLabel.qml “:

// 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 wie folgt mehrfach in der Anwendung wiederverwendet werden:

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

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

Weitere Informationen zur Entwicklung eigener wiederverwendbarer Komponenten finden Sie unter „QML-Objektattribute “.

Wie geht es weiter?

Nachdem Sie nun QML in Aktion gesehen haben, sind Sie bereit für den nächsten Schritt. Die folgende Seite begleitet Sie auf Ihrer Reise mit QML.

• QML-Anwendungen
• Qt Quick Beispiele und Tutorials