Qt Quick Controls - Flat-Design

„Flat Style“ zeigt, wie sich angepasste Steuerelemente in den „ Qt Quick Designer“ integrieren lassen. Das Beispiel verwendet ein reines QML-Modul, um Konstanten in einem Singleton zu definieren. Für die deklarativen Teile der Benutzeroberfläche werden „ .ui.qml “-Dateien verwendet. Diese lassen sich visuell im „ Qt Quick Designer“ bearbeiten.

QML-Modul für das Theming

Das Beispiel enthält ein QML-Modul namens „ Theme “, das aus einem gleichnamigen QML-Singleton besteht. Damit das Modul von QML gefunden wird, fügen wir das Importverzeichnis zu den Importpfaden der Engine in „ main.cpp “ hinzu.

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

Damit das Codemodell und der „ Qt Quick Designer“ das Modul 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 im Singleton namens „Theme.qml“ definiert. Normalerweise werden solche Attributwerte als Konstanten definiert, da sie sich zur Laufzeit nicht ändern sollen. In diesem Beispiel ermöglichen wir dem Benutzer, einige Attribute wie die Hauptfarbe, den Größenparameter und einige Schriftparameter während der Ausführung der Anwendung zu ändern.

Die Definition dieser Attributwerte in einem Singleton erleichtert deren Pflege und Änderung. Dieses Muster vereinfacht die Implementierung von Theming.

QML-Modul für benutzerdefinierte Steuerelemente

Das Modul „ Flat “ enthält einen Stil für einige Steuerelemente, die ein benutzerdefiniertes Erscheinungsbild umsetzen. Dieser Stil wird in „ qtquickcontrols2.conf “ als Stil für die Anwendung festgelegt.

Das Beispiel nutzt die Zustände eines „ Qt Quick “-Elements, um die verschiedenen Zustände eines Steuerelements zu implementieren. Dies hat den Vorteil, dass wir das benutzerdefinierte Erscheinungsbild im „ Qt Quick Designer“ definieren und die verschiedenen Zustände eines Steuerelements leicht überprüfen können. Um die Anzeige eines Schalters im „ Qt Quick -Designer“ zu bearbeiten, können wir die Datei „Switch.qml“ öffnen und anschließend die Implementierung der Anzeige namens „ switchHandle “ über das Kombinationsfeld oben neben dem Kombinationsfeld für die geöffneten Dokumente aufrufen.

Die Anwendung selbst ist lediglich ein einfaches Formular, mit dem der Benutzer einige Parameter der benutzerdefinierten Steuerelemente anpassen kann. Der Benutzer kann eine andere Hauptfarbe auswählen, die Schrift als fett oder unterstrichen festlegen und die Größe der Steuerelemente durch Umlegen eines Schalters vergrößern.

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

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ aus dem Verzeichnis „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Beispielprojekt @ code.qt.io