Die Syntax von Stilvorlagen

Die Terminologie und die Syntaxregeln von Qt-Stylesheets sind nahezu identisch mit denen von HTML-CSS. Wenn Sie bereits mit CSS vertraut sind, können Sie diesen Abschnitt wahrscheinlich schnell überfliegen.

Stilregeln

Stylesheets bestehen aus einer Abfolge von Stilregeln. Eine Stilregel setzt sich aus einem Selektor und einer Deklaration zusammen. Der Selektor legt fest, welche Widgets von der Regel betroffen sind; die Deklaration legt fest, welche Eigenschaften für das Widget festgelegt werden sollen. Zum Beispiel:

QPushButton { color: red }

In der obigen Stilregel ist „ QPushButton “ der Selektor und „ { color: red } “ die Deklaration. Die Regel legt fest, dass „ QPushButton “ und seine Unterklassen (z. B. „ MyPushButton “) Rot als Vordergrundfarbe verwenden sollen.

In Qt-Stylesheets wird die Groß-/Kleinschreibung im Allgemeinen nicht berücksichtigt (d. h., color, Color, COLOR und cOloR beziehen sich auf dieselbe Eigenschaft). Die einzigen Ausnahmen sind Klassennamen ( object names) und Qt-Eigenschaftsnamen, bei denen die Groß-/Kleinschreibung beachtet werden muss.

Für dieselbe Deklaration können mehrere Selektoren angegeben werden, wobei die Selektoren durch Kommas (,) voneinander getrennt werden. Beispielsweise lautet die Regel

QPushButton, QLineEdit, QComboBox { color: red }

entspricht dieser Folge von drei Regeln:

QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }

Der Deklarationsteil einer Stilregel besteht aus einer Liste von property: value Paare, die in geschweifte Klammern ({}) eingeschlossen und durch Semikolons getrennt sind. Zum Beispiel:

QPushButton { color: red; background-color: white }

Eine Liste der von Qt Widgets bereitgestellten Eigenschaften finden Sie im Abschnitt „Liste der Eigenschaften“ weiter unten.

Selektor-Typen

In allen bisherigen Beispielen wurde der einfachste Selektortyp verwendet, nämlich der Typ-Selektor. Qt-Stylesheets unterstützen alle in CSS2 definierten Selektoren. Die folgende Tabelle fasst die nützlichsten Selektortypen zusammen.

Unterelemente

Um komplexe Widgets zu gestalten, ist es notwendig, auf Unterelemente des Widgets zuzugreifen, wie beispielsweise die Dropdown-Schaltfläche eines QComboBox oder die Auf- und Ab-Pfeile eines QSpinBox. Selektoren können Unterelemente enthalten, die es ermöglichen, die Anwendung einer Regel auf bestimmte Unterelemente des Widgets zu beschränken. Zum Beispiel:

QComboBox::drop-down { image: url(dropdown.png) }

Die obige Regel gestaltet die Dropdown-Schaltfläche aller „ QComboBox“-Widgets. Obwohl die Syntax mit dem doppelten Doppelpunkt (::) an CSS3-Pseudo-Elemente erinnert, unterscheiden sich Qt-Unterelemente konzeptionell von diesen und weisen eine andere Kaskadierungssemantik auf.

Unterelemente werden immer relativ zu einem anderen Element – einem Referenzelement – positioniert. Dieses Referenzelement kann das Widget selbst oder ein anderes Unterelement sein. Beispielsweise wird das ::drop-down-Element eines „ QComboBox “-Widgets standardmäßig in der oberen rechten Ecke des Padding-Rechtecks des „ QComboBox “-Widgets platziert. Das ::drop-down wird standardmäßig in der Mitte des Inhaltsrechtecks des ::drop-down-Untersteuerelements platziert. In der untenstehenden Liste der stilisierbaren Widgets finden Sie die Untersteuerelemente, die zum Gestalten eines Widgets verwendet werden können, sowie deren Standardpositionen.

Das zu verwendende Ursprungsrechteck kann mithilfe der Eigenschaft „subcontrol-origin“ geändert werden. Wenn wir beispielsweise das Dropdown-Menü im „Margin“-Rechteck des „ QComboBox “ anstelle des standardmäßigen „Padding“-Rechtecks platzieren möchten, können wir Folgendes angeben:

QComboBox {
    margin-right: 20px;
}
QComboBox::drop-down {
    subcontrol-origin: margin;
}

Die Ausrichtung des Dropdowns innerhalb des „Margin“-Rechtecks wird mithilfe der Eigenschaft „subcontrol-position“ geändert.

Mit den Eigenschaften „width“ und „height“ lässt sich die Größe des Sub-Controls steuern. Beachten Sie, dass das Festlegen eines Bildes implizit die Größe eines Sub-Controls festlegt.

Das relative Positionierungsschema (position: relative) ermöglicht es, die Position des Untersteuerelements gegenüber seiner Ausgangsposition zu versetzen. Wenn beispielsweise die Dropdown-Schaltfläche des „ QComboBox “ gedrückt wird, möchten wir möglicherweise, dass der Pfeil im Inneren versetzt wird, um einen „gedrückten“ Effekt zu erzielen. Um dies zu erreichen, können wir Folgendes festlegen:

QComboBox::down-arrow {
    image: url(down_arrow.png);
}
QComboBox::down-arrow:pressed {
    position: relative;
    top: 1px; left: 1px;
}

Das absolute Positionierungsschema (position: absolute) ermöglicht es, die Position und Größe des Unterelements in Bezug auf das Referenzelement zu ändern.

Sobald sie positioniert sind, werden sie wie Widgets behandelt und können mithilfe des Box-Modells gestylt werden.

Eine Liste der unterstützten Unterelemente finden Sie in der unten stehenden Liste der Unterelemente; ein anschauliches Beispiel bietet der Artikel „Anpassen des Menüanzeige-Unterelements des QPushButton “.

Pseudo-Zustände

Selektoren können Pseudo-Zustände enthalten, die die Anwendung der Regel basierend auf dem Zustand des Widgets einschränken. Pseudo-Zustände erscheinen am Ende des Selektors, getrennt durch einen Doppelpunkt (:). Die folgende Regel gilt beispielsweise, wenn der Mauszeiger über ein QPushButton bewegt wird:

QPushButton:hover { color: white }

QRadioButtonPseudo-Zustände können mithilfe des Ausrufezeichen-Operators negiert werden. Die folgende Regel gilt beispielsweise, wenn sich der Mauszeiger nicht über einem „ “ befindet:

QRadioButton:!hover { color: red }

Pseudo-Zustände können verkettet werden; in diesem Fall wird ein logisches UND impliziert. Die folgende Regel gilt beispielsweise, wenn sich der Mauszeiger über einem markierten „ QCheckBox “ befindet:

QCheckBox:hover:checked { color: white }

Negierte Pseudozustände können in Pseudozustandsketten vorkommen. Die folgende Regel gilt beispielsweise, wenn der Mauszeiger über ein nicht gedrücktes „ QPushButton “ bewegt wird:

QPushButton:hover:!pressed { color: blue; }

Bei Bedarf kann das logische ODER mithilfe des Komma-Operators ausgedrückt werden:

QCheckBox:hover, QCheckBox:checked { color: white }

Pseudo-Zustände können in Kombination mit Untersteuerelementen auftreten. Zum Beispiel:

QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

Eine Liste der von Qt Widgets bereitgestellten Pseudo-Zustände finden Sie im Abschnitt „Liste der Pseudo-Zustände“ weiter unten.

Konfliktlösung

Konflikte entstehen, wenn mehrere Stilregeln dieselben Eigenschaften mit unterschiedlichen Werten festlegen. Betrachten Sie das folgende Stylesheet:

QPushButton#okButton { color: gray }
QPushButton { color: red }

Beide Regeln treffen auf Instanzen von „ QPushButton “ mit dem Namen „ okButton “ zu, und es besteht ein Konflikt hinsichtlich der Eigenschaft „ color “. Um diesen Konflikt zu lösen, müssen wir die Spezifität der Selektoren berücksichtigen. Im obigen Beispiel gilt „ QPushButton#okButton “ als spezifischer als „ QPushButton “, da es sich (in der Regel) auf ein einzelnes Objekt bezieht und nicht auf alle Instanzen einer Klasse.

Ebenso sind Selektoren mit Pseudozuständen spezifischer als solche, die keine Pseudozustände angeben. Das folgende Stylesheet legt daher fest, dass ein „ QPushButton “ weißen Text haben soll, wenn der Mauszeiger darüber fährt, andernfalls roten Text:

QPushButton:hover { color: white }
QPushButton { color: red }

Hier ist ein kniffliges Beispiel:

QPushButton:hover { color: white }
QPushButton:enabled { color: red }

Hier haben beide Selektoren die gleiche Spezifität. Wenn der Mauszeiger also über die Schaltfläche bewegt wird, während diese aktiviert ist, hat die zweite Regel Vorrang. Wenn wir möchten, dass der Text in diesem Fall weiß ist, können wir die Reihenfolge der Regeln wie folgt ändern:

QPushButton:enabled { color: red }
QPushButton:hover { color: white }

Alternativ können wir die erste Regel spezifischer gestalten:

QPushButton:hover:enabled { color: white }
QPushButton:enabled { color: red }

Ein ähnliches Problem tritt im Zusammenhang mit Typ-Selektoren auf. Betrachten Sie das folgende Beispiel:

QPushButton { color: red }
QAbstractButton { color: gray }

Beide Regeln gelten für Instanzen von „ QPushButton “ (da „ QPushButton “ von „ QAbstractButton “ erbt), und es besteht ein Konflikt bezüglich der Eigenschaft „color “. Da „ QPushButton “ von „ QAbstractButton “ erbt, könnte man versucht sein anzunehmen, dass „ QPushButton “ spezifischer ist als „ QAbstractButton “. Bei der Auswertung von Stylesheets haben jedoch alle Typ-Selektoren die gleiche Spezifität, und die zuletzt auftretende Regel hat Vorrang. Mit anderen Worten: Die Farbe wird für alle „ QAbstractButton“ auf „ gray “ gesetzt, einschließlich der „ QPushButton“. Wenn wir wirklich möchten, dass „ QPushButton“ roten Text haben, können wir die Reihenfolge der Regeln jederzeit ändern.

Zur Bestimmung der Spezifität einer Regel folgen Qt-Stylesheets der CSS2-Spezifikation:

Die Spezifität eines Selektors wird wie folgt berechnet:

• Zähle die Anzahl der ID-Attribute im Selektor (= a)
• Zähle die Anzahl der anderen Attribute und Pseudoklassen im Selektor (= b)
• Zähle die Anzahl der Elementnamen im Selektor (= c)
• Pseudo-Elemente [d. h. Unterelemente] werden ignoriert.

Durch Verknüpfung der drei Zahlen a-b-c (in einem Zahlensystem mit großer Basis) ergibt sich die Spezifität.

Einige Beispiele:

*             {}  /* a=0 b=0 c=0 -> specificity =   0 */
LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */

Kaskadierung

Stylesheets können auf dem „ QApplication “, auf übergeordneten Widgets und auf untergeordneten Widgets festgelegt werden. Das effektive Stylesheet eines beliebigen Widgets ergibt sich aus der Zusammenführung der Stylesheets, die auf den Vorfahren des Widgets (Eltern, Großeltern usw.) festgelegt sind, sowie aller Stylesheets, die auf dem „ QApplication “ festgelegt sind.

Bei Konflikten hat das eigene Stylesheet des Widgets stets Vorrang vor jedem geerbten Stylesheet, unabhängig von der Spezifität der konkurrierenden Regeln. Ebenso hat das Stylesheet des übergeordneten Widgets Vorrang vor dem des über-übergeordneten Widgets usw.

QApplication Eine Folge davon ist, dass das Festlegen einer Stilregel für ein Widget diesem automatisch Vorrang vor anderen Regeln einräumt, die in den Stylesheets der übergeordneten Widgets oder im Stylesheet „ QApplication “ festgelegt sind. Betrachten Sie das folgende Beispiel. Zunächst legen wir ein Stylesheet für „ “ fest:

qApp->setStyleSheet("QPushButton { color: white }");

Anschließend legen wir ein Stylesheet für ein „ QPushButton “-Objekt fest:

myPushButton->setStyleSheet("* { color: blue }");

Das Stylesheet für das „ QPushButton “-Objekt erzwingt, dass das „ QPushButton “ (und alle untergeordneten Widgets) blauen Text anzeigen, ungeachtet der spezifischeren Regeln, die im anwendungsweiten Stylesheet festgelegt sind.

Das Ergebnis wäre dasselbe gewesen, wenn wir geschrieben hätten

myPushButton->setStyleSheet("color: blue");

allerdings hätte das Stylesheet keinen Einfluss auf untergeordnete Elemente des „ QPushButton “, falls dieses welche hätte (was unwahrscheinlich ist).

Die Kaskadierung von Stylesheets ist ein komplexes Thema. Die genauen Details findest du in der CSS2-Spezifikation. Beachte, dass Qt derzeit ` !important` nicht implementiert.

Vererbung

Im klassischen CSS werden Schriftart und Farbe eines Elements, sofern sie nicht explizit festgelegt sind, automatisch vom übergeordneten Element geerbt. Bei der Verwendung von Qt-Stylesheets erbt ein Widget standardmäßig seine Schriftart- und Farbeinstellungen nicht automatisch von seinem übergeordneten Widget.

Betrachten wir beispielsweise ein ` QPushButton ` innerhalb eines ` QGroupBox`:

qApp->setStyleSheet("QGroupBox { color: red; } ");

Für das ` QPushButton ` ist keine explizite Farbe festgelegt. Daher übernimmt es nicht die Farbe seines übergeordneten ` QGroupBox`, sondern die Systemfarbe. Wenn wir die Farbe für ein ` QGroupBox ` und dessen untergeordnete Elemente festlegen möchten, können wir Folgendes schreiben:

qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");

Im Gegensatz dazu werden die Festlegung einer Schriftart und einer Farbpalette mithilfe von ` QWidget::setFont()` und ` QWidget::setPalette()` an untergeordnete Widgets weitergegeben.

Wenn Sie möchten, dass sich Schriftart und Farbpalette auf untergeordnete Widgets auswirken, können Sie das Flag „ Qt::AA_UseStyleSheetPropagationInWidgetStyles “ wie folgt setzen:

Verwendung:

QCoreApplication::setAttribute(Qt::AA_UseStyleSheetPropagationInWidgetStyles, true);

Wenn die Weitergabe von Schriftart und Farbpalette im Widget-Stil aktiviert ist, verhalten sich Änderungen an Schriftart und Farbpalette, die über Qt-Stilvorlagen vorgenommen werden, so, als hätte der Benutzer die entsprechenden Methoden ` QWidget::setPalette()` und ` QWidget::setFont()` manuell für alle Qt Widgets aufgerufen, auf die sich die Stilvorlage bezieht.

• Durch ein Stylesheet vorgenommene Änderungen werden weitergegeben. Sie werden einmalig – zum Zeitpunkt der Änderung – an alle Widgets weitergeleitet, die dem Stylesheet entsprechen.
• Änderungen, die durch den Aufruf von ` QWidget::setPalette()` oder ` QWidget::setFont()` vorgenommen werden, werden vererbt. Sie werden von allen bestehenden und zukünftigen untergeordneten Widgets geerbt, bei denen der jeweilige Pinsel oder die jeweilige Schriftart nicht explizit festgelegt wurde.

Widgets innerhalb von C++-Namespaces

Der Typ-Selektor kann verwendet werden, um Widgets eines bestimmten Typs zu gestalten. Zum Beispiel:

class MyPushButton : public QPushButton {
    // ...
};

// ...
void someFunction()
{
    qApp->setStyleSheet("MyPushButton { background: yellow; }");
   //...

Das Qt-Stylesheet verwendet QObject::className() des Widgets, um zu bestimmen, wann der Typ-Selektor angewendet werden soll. Befinden sich benutzerdefinierte Widgets in Namespaces, gibt QObject::className() <NAMESPACE>::<CLASSNAME> zurück. Dies steht im Widerspruch zur Syntax für Unterelemente. Um dieses Problem zu beheben, müssen wir bei der Verwendung des Typ-Selektors für Widgets in Namespaces „ :: “ durch „ -- “ ersetzen. Zum Beispiel:

namespace ns {
    class MyPushButton : public QPushButton {
        // ...
    };
}

// ...
void someMethod()
{
    qApp->setStyleSheet("ns--MyPushButton { background: yellow; }");
   //...

Festlegen von QObject-Eigenschaften

Ab Version 4.3 können alle designierbaren „ Q_PROPERTY “ mithilfe der Syntax „qproperty-<Eigenschaftsname>“ festgelegt werden.

Zum Beispiel:

MyLabel { qproperty-pixmap: url(pixmap.png); }
MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }
QPushButton { qproperty-iconSize: 20px 20px; }

Wenn die Eigenschaft auf eine mit ` Q_ENUM` deklarierte Enumeration verweist, sollten Sie deren Konstanten anhand ihres Namens und nicht anhand ihres numerischen Werts referenzieren.