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 Abschnitt für Importe und einem Abschnitt für Objektdeklarationen. 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 zur Anzeige von Bildern und Text und zur Verarbeitung von Benutzereingaben.

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

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

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

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

Alles zusammenfügen

Die im obigen Beispiel verwendeten Typen Window 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

Window {
    width: 640
    height: 480
    visible: true
    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. So erstellen Sie ein neues QML-Projekt in Qt Creator:

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

Wenn Sie fertig sind, generiert Qt Creator die notwendigen Dateien und öffnet das Projekt für die Entwicklung. Wenn Sie auf die grüne Schaltfläche Ausführen klicken, wird die Anwendung ausgeführt. 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:

• Qt Creator: Erstellen von Qt Quick Anwendungen
• Qt Creator: Tutorial: Erstellen und Ausführen

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 {
    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 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

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 auf eine beliebige Stelle des Fensters klickt, ändert sich die Farbe des Rechtecks von rot zu blau. Durch erneutes Antippen wechselt es wieder zu rot.

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

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;
        }
    }
}

Jedes Mal, wenn Sie die Eingabetaste drücken, wechselt der Text zwischen "Hello, World" und "Goodbye, World".

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 Window gebunden. Sollte sich die Geometrie des übergeordneten Window Objekts ändern, würde sich die Geometrie jedes untergeordneten Rectangle Objekts 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 ü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:

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 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 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 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