Qt Widgets -Anpassung mithilfe von Stylesheets

Bei der Verwendung von Stylesheets wird jedes Widget als Box mit vier konzentrischen Rechtecken behandelt: dem Randrechteck, dem Rahmenrechteck, dem Innenabstandsrechteck und dem Inhaltsrechteck. Das Box-Modell beschreibt dies ausführlicher.

Das Box-Modell

Die vier konzentrischen Rechtecke lassen sich konzeptionell wie folgt darstellen:

• Der Rand liegt außerhalb der Umrandung.
• Die Umrandung wird zwischen dem Rand und dem Innenabstand gezeichnet.
• Der Innenabstand liegt innerhalb des Rahmens, zwischen dem Rahmen und dem eigentlichen Inhalt.
• Der Inhalt ist das, was vom ursprünglichen Widget oder Unterelement übrig bleibt, nachdem wir den Rand, den Rahmen und den Innenabstand entfernt haben.

Die Eigenschaften „margin“, „border-width“ und „padding“ sind standardmäßig auf Null gesetzt. In diesem Fall fallen alle vier Rechtecke (margin, border, padding und content) exakt zusammen.

Sie können mithilfe der Eigenschaft „background-image“ einen Hintergrund für das Widget festlegen. Standardmäßig wird das Hintergrundbild nur für den Bereich innerhalb des Rahmens gezeichnet. Dies lässt sich mithilfe der Eigenschaft „background-clip“ ändern. Mit den Eigenschaften „background-repeat“ und „background-origin“ können Sie die Wiederholung und den Ursprung des Hintergrundbildes steuern.

Ein „background-image“ wird nicht an die Größe des Widgets angepasst. Um ein „Skin“ oder einen Hintergrund bereitzustellen, der sich entsprechend der Widget-Größe anpasst, muss „border-image“ verwendet werden. Da die Eigenschaft „border-image“ einen alternativen Hintergrund bereitstellt, ist es nicht erforderlich, ein „background-image“ anzugeben, wenn „border-image“ festgelegt ist. Werden beide Eigenschaften angegeben, wird das „border-image“ über das „background-image“ gelegt.

Darüber hinaus kann die Eigenschaft „image“ verwendet werden, um ein Bild über dem „border-image“ darzustellen. Das angegebene Bild wird nicht gekachelt oder gestreckt, und wenn seine Größe nicht mit der Größe des Widgets übereinstimmt, wird seine Ausrichtung mithilfe der Eigenschaft „image-position“ festgelegt. Im Gegensatz zu „background-image“ und „border-image“ kann man in der Eigenschaft „image“ ein SVG angeben; in diesem Fall wird das Bild automatisch entsprechend der Widget-Größe skaliert.

Die Schritte zum Rendern einer Regel lauten wie folgt:

• Clip für den gesamten Darstellungsvorgang festlegen (border-radius)
• Hintergrund zeichnen (background-image)
• Zeichne den Rahmen (border-image, border)
• Überlagerungsbild zeichnen (image)

Unterelemente

Ein Widget wird als Hierarchie (Baum) von Unterelementen betrachtet, die übereinander gezeichnet werden. Beispielsweise zeichnet die „ QComboBox “ das Dropdown-Unterelement, gefolgt vom Abwärtspfeil-Unterelement. Ein „ QComboBox “ wird somit wie folgt dargestellt:

• Die Regel „ QComboBox { }“ rendern
• Rendern der Regel „QComboBox::drop-down { }“
• Die Regel „QComboBox::down-arrow { }“ rendern

Unterelemente stehen in einer Eltern-Kind-Beziehung zueinander. Im Fall von „ QComboBox “ ist das übergeordnete Element von „down-arrow“ das „drop-down“-Element, und das übergeordnete Element von „drop-down“ ist das Widget selbst. Unterelemente werden innerhalb ihres übergeordneten Elements mithilfe der Eigenschaften „subcontrol-position“ und „subcontrol-origin“ positioniert.

Nach der Positionierung können Unterelemente mithilfe des Box-Modells gestylt werden.