Qt Quick Controls - Flacher Stil

Flat Style zeigt, wie man angepasste Steuerelemente in Qt Quick Designer integriert. Das Beispiel verwendet ein reines QML-Plugin, um Konstanten in einem Singleton zu definieren. Für die deklarativen Teile der Benutzeroberfläche werden .ui.qml Dateien verwendet. Diese können im Qt Quick Designer visuell bearbeitet werden.

QML-Plugin

Das Beispiel enthält ein Plugin namens Theme. Das Plugin besteht aus einer QML-Datei Theme.qml und einer Datei qmldir. Das Plugin befindet sich im Unterverzeichnis imports und wurde als Ressource hinzugefügt. Um sicherzustellen, dass das Plugin von QML gefunden wird, fügen wir das Importverzeichnis zu den Importpfaden der Engine in main.cpp hinzu.

...
engine.addImportPath(":/imports");
...

Um sicherzustellen, dass das Codemodell und Qt Quick Designer das Plugin finden können, fügen wir die folgende Zeile zu flatstyle.pro hinzu.

QML_IMPORT_PATH = $$PWD/imports

Alle Farben, Schriftparameter und Größenkonstanten, die in diesem Beispiel verwendet werden, sind als Eigenschaften in dem Singleton namens Theme.qml definiert. Normalerweise werden solche Attributwerte als Konstanten definiert, da sie sich während der Laufzeit nicht ändern sollen. In diesem Beispiel erlauben wir dem Benutzer, einige Attribute wie die Hauptfarbe, den Größenparameter und einige Schriftparameter zu ändern, während die Anwendung läuft.

Die Definition dieser Attributwerte in einem Singleton macht es einfach, sie zu pflegen und zu ändern. Mit diesem Muster lässt sich Theming leicht implementieren.

Implementierung von benutzerdefinierten Steuerelementen

Das Plugin enthält auch einen Stil für eine Reihe von Steuerelementen, die ein benutzerdefiniertes Erscheinungsbild implementieren. Dieser Stil befindet sich in Flat und wird als Stil für die Anwendung in qtquickcontrols2.conf festgelegt.

Das Beispiel verwendet die Zustände eines Qt Quick Elements, um die verschiedenen Zustände eines Steuerelements zu implementieren. Dies hat den Vorteil, dass wir das benutzerdefinierte Aussehen im Qt Quick Designer definieren können und die verschiedenen Zustände eines Steuerelements leicht überprüfen können. Um den Indikator eines Schalters im Qt Quick Designer zu bearbeiten, können wir die Datei Switch.qml öffnen und dann die Implementierung des Indikators namens switchHandle über das Kombinationsfeld oben neben dem Kombinationsfeld für die geöffneten Dokumente eingeben.

Die Anwendung selbst ist nur ein einfaches Formular, mit dem der Benutzer einige Parameter der benutzerdefinierten Steuerelemente anpassen kann. Der Benutzer kann eine andere Hauptfarbe wählen, die Schrift fett oder unterstrichen einstellen und die Größe der Steuerelemente durch Umschalten eines Schalters erhöhen.

MainForm.ui.qml ist nur die rein deklarative Definition des Formulars, während flatstyle.qml das Formular instanziiert und die Logik implementiert.

Ausführen des Beispiels

Zum Ausführen des Beispiels von Qt Creatorauszuführen, öffnen Sie den Modus Welcome und wählen Sie das Beispiel unter Examples aus. Weitere Informationen finden Sie unter Erstellen und Ausführen eines Beispiels.

Beispielprojekt @ code.qt.io