Gestaltungsansätze für Qt Widgets

Qt Widgets bietet drei Möglichkeiten, das Aussehen von Widgets zu ändern:

• Ein „ style “ zeichnet jedes Widget. Erstellen Sie eine Unterklasse von „ QProxyStyle “, um den Plattformstil anzupassen, oder von „ QCommonStyle “, um ein vollständig individuelles Erscheinungsbild zu implementieren. Dies ist der Mechanismus, den die Qt-eigenen Stile verwenden, und derjenige, der in Produktionsanwendungen zum Einsatz kommen sollte.
• StyleKit beschreibt ein Design deklarativ in QML und wendet es über „ QStyleKitStyle “ – eine Implementierung von „ QStyle “ – auf Widgets an. Dieselbe Stilvorlage gestaltet auch „ Qt Quick Controls “.
• Stylesheets überschreiben einzelne visuelle Eigenschaften mit CSS-ähnlichen Regeln. Sie sind ein Werkzeug für das Prototyping und für kleine, lokale Anpassungen, nicht für das endgültige Erscheinungsbild einer Anwendung.

Auf dieser Seite wird erläutert, welche Kosten die einzelnen Ansätze mit sich bringen und wann man sich für welchen entscheiden sollte.

Wählen Sie einen Ansatz

Die folgende Tabelle ordnet ein Styling-Ziel dem dafür geeigneten Mechanismus zu.

Implementieren Sie einen Stil für Produktionsanwendungen

Eine Unterklasse von „ QStyle “ zeichnet Widgets direkt mit „ QPainter “ und nutzt dabei die Informationen im „ QStyleOption “, das jedes Widget an den Stil übergibt. Ein Stil hat die volle Kontrolle über jedes Element, von der Abschrägung einer Schaltfläche bis hin zu den Zweigen einer Baumansicht, und er übt diese Kontrolle mit dem Aufwand eines gewöhnlichen Zeichenvorgangs aus: Es müssen keine Regeln abgeglichen und keine Widget-spezifischen Zustände neu berechnet werden.

Wählen Sie die Basisklasse je nachdem aus, wie stark Sie Änderungen vornehmen möchten:

• QProxyStyle umschließt einen anderen Stil – standardmäßig den Plattformstil – und ermöglicht es Ihnen, ausgewählte Funktionen wie ` drawPrimitive()`, ` pixelMetric()` oder ` styleHint()` zu überschreiben. Alles, was Sie nicht überschreiben, behält das native Aussehen und Verhalten bei. Verwenden Sie diese Klasse, um den Plattformstil anzupassen.
• QCommonStyle implementiert das Verhalten, das alle Qt-Stile gemeinsam haben, und überlässt die Darstellung dir. Verwende ihn als Grundlage für ein vollständig individuelles Erscheinungsbild. „Stile und stilbewusste Widgets“ führt durch die Stilelemente und zeigt, wie jedes Widget gezeichnet wird.

Legen Sie den Stil einmalig fest, bevor die Anwendung ihre Fenster erstellt:

#include <QtWidgets>

#include "customstyle.h"

int main(int argc, char *argv[])
{
    QApplication::setStyle(new CustomStyle);
    QApplication app(argc, argv);
    QSpinBox spinBox;
    spinBox.show();
    return app.exec();
}

Zeichnen Sie mit den Farben aus der „ QPalette “ in der Stiloption statt mit fest codierten Farben. Derselbe Stil erzeugt dann eine helle und eine dunkle Variante des Designs aus zwei Paletten, ohne den Stil zu wechseln. Der „Fusion“-Stil von Qt funktioniert auf diese Weise.

Um Benutzern die Auswahl des Stils über die Befehlszeile mit der Option „ -style “ zu ermöglichen oder um ihn zwischen Anwendungen gemeinsam zu nutzen, erstellen Sie den Stil als Plugin. Siehe „ QStylePlugin “ und „How to Create Qt Plugins“.

Beschreiben Sie das Design in QML mit StyleKit

StyleKit ist ein deklaratives Styling-System. Ein Stil ist eine QML-Datei, deren Stammobjekt ein ` Style` ist, das Farben, Größen, Radien, Rahmen und zustandsabhängige Variationen für jeden Steuerelementtyp festlegt. Eigenschaften werden über eine Steuerelementhierarchie weitergegeben, sodass ein einmal in ` abstractButton ` festgelegter Wert für jede Art von Schaltfläche gilt und ein Stil mehrere benannte Themen definieren kann.

QStyleKitStyle ist eine Implementierung von ` QStyle `, die einen solchen Stil liest und Widgets mit ` QPainter` rendert. ` Qt Quick ` ist nicht am Rendering beteiligt. Dieselbe Datei ` Style ` legt auch das Design für ` Qt Quick Controls` fest, sodass eine Anwendung, die beide Toolkits verwendet, nur eine einzige Designdefinition pflegen muss. Die im Stil definierten Themen werden mit ` setThemeName()` ausgewählt.

auto *style = new QStyleKitStyle(QStringLiteral(":/styles/MyStyle.qml"));
QApplication::setStyle(style);

QStyleKitStyle ist seit Qt 6.12 verfügbar. StyleKit ist ein Qt Labs-Modul, und seine API kann sich zwischen den einzelnen Qt-Versionen ändern. Das Beispiel „StyleKit Widgets“ zeigt eine Widget-Anwendung mit mehreren StyleKit-Stilen und -Themen.

Verwenden Sie Stylesheets für das Prototyping

Qt-Stylesheets ändern das Erscheinungsbild von Widgets durch Regeln in einer CSS-ähnlichen Syntax, ohne dass C++-Code geschrieben werden muss. Sie eignen sich gut zum Ausprobieren eines Designs: Bearbeiten Sie eine „ .qss “-Datei und starten Sie die Anwendung neu, oder übergeben Sie die Datei mit der Befehlszeilenoption „ -stylesheet “, und der „Qt Widgets Designer“ zeigt eine Vorschau derselben Regeln an. Sie sind zudem der schnellste Weg, um ein einzelnes Widget, wie beispielsweise ein Pflichtfeld, mit einem gelben Hintergrund zu kennzeichnen.

Stylesheets sind mit einem gewissen Aufwand verbunden, der sie als Styling-Mechanismus für eine Produktionsanwendung ungeeignet macht:

• Jedes betroffene Widget wird über die Stylesheet-Engine gezeichnet. Wenn ein Stylesheet festgelegt ist, gibt ` QWidget::style()` einen Stylesheet-Stil zurück, der das zugrunde liegende ` style` umschließt. Für jedes Widget gleicht es die Selektoren mit der Klasse, dem Objektnamen, den Eigenschaften und dem Zustand des Widgets ab, berechnet die Darstellungsregeln und speichert sie pro Widget im Cache. Der Speicher- und Rechenaufwand steigt mit der Anzahl der Widgets und Regeln.
• Das Ändern eines Stylesheets führt zu einer Neugestaltung aller Elemente, auf die es angewendet wird. Jeder Aufruf von ` QApplication::setStyleSheet()` löscht den Cache und gestaltet jedes Widget in der Anwendung neu, wodurch Schriftarten, Farbpaletten, Geometrie und Größenangaben neu berechnet werden, was zu sichtbarem Flackern führen kann. Bauen Sie den Themenwechsel nicht auf Stylesheets auf.
• Eine partielle Regel hebt das native Erscheinungsbild auf. Wenn eine Regel etwas verlangt, was der native Stil nicht erfüllen kann – beispielsweise eine Hintergrundfarbe für ein ` QPushButton` –, zeichnet die Stylesheet-Engine das gesamte Element selbst, ohne die native Gestaltung. Sie müssen dann Rahmen, Abstände und jeden Zustand selbst festlegen, und aus einer kleinen Anpassung wird schnell eine vollständige Beschreibung des Erscheinungsbilds. Siehe „ Qt Widgets “ mithilfe von Stylesheets anpassen.
• Selektoren koppeln das Design an Implementierungsdetails. Regeln gleichen Klassennamen, Objektnamen und Eigenschaftswerte ab. Das Umbenennen eines Objekts oder das Ersetzen einer Widget-Klasse verhindert stillschweigend, dass die Regel weiterhin zutrifft. Regeln wirken sich nicht auf benutzerdefinierte Widgets aus, die ohne den Stil gezeichnet werden.
• Stylesheets haben gegenüber programmatischen Einstellungen den Vorteil, dass ein Stylesheet Schriftarten, Paletten und Elementfarben überschreibt, die mit Funktionen wie ` QWidget::setFont()` oder ` QTreeWidgetItem::setBackground()` festgelegt wurden, sodass die Gestaltung eines Widgets nicht mehr an einer einzigen Stelle sichtbar ist.

Einen direkten Vergleich zwischen Stylesheets und ` QStyle `-Unterklassen finden Sie im KDAB-Artikel „Say No to Qt Style Sheets“.

Wenn Sie dennoch Stylesheets verwenden

Für einen Prototyp oder für die wenigen lokalen Anpassungen, die eine Produktionsanwendung benötigt, sollten Sie das Stylesheet überschaubar halten:

• Speichere die Regeln in einer „ .qss “-Datei, die in das Qt-Ressourcensystem eingebunden ist. Lege sie einmalig in der Anwendung mit ` QApplication::setStyleSheet()` fest, bevor das erste Fenster angezeigt wird, und belasse sie dort. Verwende ` QWidget::setStyleSheet()` nur für Anpassungen, die wirklich lokal auf ein Widget und dessen untergeordnete Elemente beschränkt sind.
• Stellen Sie Stylesheets nicht aus C++-Zeichenketten zusammen. Ein für ein Widget festgelegtes Stylesheet wird einmal für jedes Widget geparst, auf das es angewendet wird – nicht einmal für jede Zeichenkette –, und jeder Aufruf von ` QWidget::setStyleSheet()` aktualisiert das Widget und alle seine untergeordneten Elemente, selbst wenn sich die Zeichenkette nicht geändert hat. Eine mit ` QString::arg()` erstellte Zeichenkette, die Daten widerspiegelt – wie beispielsweise einen roten Rahmen für einen ungültigen Wert –, führt bei jeder Aktualisierung zu einer Neuberechnung des Widgets. Drücken Sie den Unterschied stattdessen mit einem Selektor für einen Objektnamen oder eine Qt-Eigenschaft in einem einzigen Stylesheet aus und werten Sie diesen neu aus, wie unter „Anpassung mithilfe dynamischer Eigenschaften“ beschrieben.
• Farbangaben nicht fest codieren. Eine wörtliche Farbangabe wie „ #ffffff “ passt nur zu einem Thema. Verwenden Sie „ palette(window) “, „ palette(text) “ und die anderen Palettenrollen, damit das Stylesheet der Anwendungspalette folgt, einschließlich eines dunklen Farbschemas.
• Legen Sie die Größe nicht ausschließlich in Pixeln fest. Ein Wert wie „ px “ passt sich zwar an die Bildschirmgröße an, jedoch nicht an die vom Benutzer gewählte Schriftart. Verwenden Sie Längenangaben in „ em “ und „ ex “ für Abstände, Ränder und Größen, die sich an der Schriftart orientieren sollen, sowie „ pt “ für Schriftgrößen.

Wechseln Sie von einem Stylesheet zu einem Stil

Wenn aus einem Prototyp ein Produkt wird, übertragen Sie das Design in einen Stil. Die meisten Konstrukte aus Stylesheets haben ein direktes Pendant: