Qt QML-Komponenten

Neben den QML-Komponenten von AppStudio, die zum Entwerfen der Benutzeroberfläche Ihrer App verfügbar sind, können Sie auch auf sämtliche QML-Komponenten von The Qt Company zugreifen. In diesem Thema werden die nützlichsten Komponenten beschrieben. Eine vollständige Liste der Qt QML-Typen finden Sie in der Qt-Dokumentation.

Folgende Typen sind einige der am häufigsten verwendeten QML-Typen:

• Positionierer
• Anker
• Layouts
• Repeater
• Zustände
• Verbindungen

Vorsicht:

Bei der Migration von Qt 5.13.1 zu Qt 5.15.2 wurde festgestellt, dass Elemente der Benutzeroberfläche (UI) in AppStudio-Apps und -Beispielen unterschiedlich angezeigt werden. Unterschiede wurden bei Position, Größe, Layout, Farbe, Zuschneideverhalten, Textumbruch und Schriftart beobachtet. Überprüfen Sie, wie die UI-Elemente in Ihren Apps angezeigt werden. Gegebenenfalls müssen Sie die Verschachtelung Ihrer Komponenten ändern oder weitere bzw. weniger Eigenschaften angeben. Da die Definition von UI-Elementen in QML äußert flexibel vorgenommen werden kann, gibt es keine feste Vorgehensweise.

In Version 5.15.2 handelt es sich bei Qt-Eigenschaftstypen wie bool, string und int um strenge Typen, die keine NULL- oder undefinierten Werte mehr unterstützen. Bei Verwendung dieser Typen in Ihrer App müssen Sie sich überlegen, wie NULL- oder undefinierte Werte unterstützt werden sollen. Alternativ können Sie den Eigenschaftstyp var verwenden, in dem NULL- und undefinierte Werte zulässig sind, jedoch auch alle anderen Werte.

Positionierer

Positionierer sind Container-Elemente zum Verwalten der Positionen von Elementen auf der Benutzeroberfläche. Zu den Positionierertypen zählen "row", "column", "grid" und "flow". Wenn Sie die Elemente basierend auf einem dieser Typen organisieren, können Sie sie in einem regelmäßigen Layout anordnen, das für Benutzeroberflächen, deren Größe geändert werden kann, gut geeignet ist. Beispiel: Wenn Sie Ihre Elemente in einem Gitter organisieren und Sie die App im Hochformat anzeigen, wird beispielsweise eine Elementmatrix von 2 x 5 angezeigt. Wenn Sie jedoch zum Querformat wechseln, wird das Elementgitter automatisch neu angeordnet und mit einer Elementmatrix von 3 x 4 optimal an den Bildschirm angepasst.

Weitere Informationen zu Positionsgebern finden Sie in der Qt-Dokumentation.

Anker

Jedes Element kann über sieben Ankerpunkte verfügen, und andere Elemente können in Relation zu diesen positioniert werden. Hierbei handelt es sich um die Punkte "top", "bottom", "left", "right", "horizontal center", "vertical center" und "baseline" (die Linie, auf der Text im Element positioniert wird). Dies eignet sich ideal, um Elemente zur Erstellung dynamischer Benutzeroberflächen relativ zueinander zu positionieren. Die Anker werden auch dann beibehalten, wenn sich die Dimensionen oder Positionen von Elementen ändern. Ankerränder können ebenfalls festgelegt werden, indem der Platz außerhalb des Ankers eines Elements angegeben wird.

Weitere Informationen zu Ankern finden Sie in der Qt-Dokumentation.

Layouts

Um Qt Quick-Layouts zu verwenden, müssen Sie auf ein zusätzliches Modul in Ihrer QML-Datei verweisen, z. B.:

import QtQuick.Layouts 1.15

Die drei Layouts sind RowLayout, ColumnLayout und GridLayout. Im Vergleich zu Zeilen, Spalten und Gittern ermöglicht die Verwendung von Layouts eine detailliertere Steuerung der Elementpositionierung. Hierzu zählt auch die Möglichkeit, die Ausrichtung jedes Elements im Layout festzulegen. Mit GridLayouts können außerdem getrennte Spalten- und Zeilenabstände festgelegt, Elemente über Zeilen und Spalten ausgedehnt und eine einzelne Gitterzelle für ein Element angegeben werden. Mithilfe von Layouts können auch die bevorzugte maximale und minimale Breite und Höhe sowie die Füllungsbreite und -höhe für die einzelnen Elemente festgelegt werden. Dies ist insbesondere dann hilfreich, wenn Anwendungen für dynamische oder mehrere Anzeigen entworfen werden. Layouts lassen sich auch spiegeln, wobei ein Links-nach-rechts-Layout in ein Rechts-nach-links-Layout geändert wird.

Repeater

Ein Repeater-Objekt erstellt Elemente aus einer Vorlage für die Verwendung mit Positionierern, indem Daten aus einem Modell herangezogen werden. Durch die Kombination von Repeatern und Positionierern lässt sich bei einer großen Menge von Elementen eine effektive Anordnung erreichen. Ein Modell kann Folgendes sein:

• Eine Zahl, die die Anzahl der vom Repeater zu erstellenden Delegaten angibt
• Datenquelle mit Freiformlisten: ein ListModel
• Zeichenfolgenliste
• Objektliste

Das Delegat stellt eine Vorlage bereit, in der alle vom Repeater instanziierten Elemente festgelegt werden. Ein Repeater-Delegat kann im Repeater auf seinen Index und auf die für den Delegaten relevanten Modelldaten zugreifen.

Weitere Informationen zu Repeatern finden Sie in der Qt-Dokumentation.

Zustände

Mithilfe von Zuständen kann eine andere Ansicht oder ein anderer Bildschirm in einer App angezeigt werden. Darüber können Sie Elemente basierend auf dem Eigenschaftswert ein- oder ausblenden, die Verankerung ändern oder Parent-Objekte ändern. Basierend auf dem Zustand lassen sich Animationen starten, beenden oder anhalten bzw. Skripte ausführen. Jede elementbasierte Komponente verfügt über eine Zustandseigenschaft und einen Standardzustand. Der Standardzustand ist die leere Zeichenfolge ("") und enthält alle anfänglichen Eigenschaftswerte. Durch die Festlegung der Zustandseigenschaft auf eine leere Zeichenfolge wird der Standardzustand geladen.

Weitere Informationen zu Status finden Sie in der Qt-Dokumentation.

Verbindungen

In Qt 5.15 gibt es eine neue Syntax für Verbindungen. Die vorherige Methode zum Erstellen eines Handlers vom Typ "on<Signal>" wird nicht mehr unterstützt; stattdessen gilt nun die Funktionssyntax. Im Folgenden ist eine Warnmeldung dargestellt, die Sie bei Ausführung der App mit der vorherigen Verbindungssyntax erhalten:

qrc:/qml/main.qml:277:5: QML Connections: Implicitly defined onFoo properties in Connections are deprecated. Use this syntax instead: function onFoo (<arguments>) { ... }

Im folgenden Beispiel ist dargestellt, wie in Qt 5.13 und früheren Versionen normalerweise eine Verbindung definiert wurde:

Connections { 
     target: mouseArea 
     onPositionChanged: { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     onPressedChanged: { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

Im folgenden Beispiel ist dargestellt, wie ab Qt 5.15 eine Verbindung definiert werden muss:

Connections { 
     target: mouseArea 
     function onPositionChanged(mouse) { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     function onPressedChanged() { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

Nun, da Funktionssyntax verwendet wird, müssen Sie sicherstellen, dass alle Signalparameter explizit aufgelistet sind. Werden Parameter ausgelassen, sind diese Signalparameter nicht nach Name verfügbar, was zu undefinierten Referenzen im Code führen kann. Beispielsweise müssen Sie anstelle von onPositionChanged den Code function onPositionChanged(mouse) verwenden.

Beim Auflisten der Signalparameter empfiehlt es sich, alle Parameter in der richtigen Reihenfolge aufzuführen und die formalen Signalparameternamen als Funktionsparameternamen anzugeben. Verwenden Sie beispielsweise function onPositionChanged(mouse) und nicht function onPositionChanged(m).

Wenn das Signal für eine Eigenschaftsänderung steht, müssen Sie das Objekt explizit benennen, um auf die Eigenschaft zuzugreifen. Beispielsweise müssen Sie anstelle von pressed den Code mouseArea.pressed verwenden.

Weitere Informationen zu Verbindungen finden Sie in der Qt-Projektdokumentation.