Back to Qt.io
Contact Us Blog Download Qt
Auf dieser Seite

Referenz zu Stylesheets Layout-Verwaltung

Beispiele für Qt-Stylesheets

Wir werden uns nun einige Beispiele ansehen, um den Einstieg in die Verwendung von Qt-Stylesheets zu erleichtern.

Verwendung von Stylesheets

Anpassen der Vordergrund- und Hintergrundfarben

Beginnen wir damit, die Hintergrundfarbe aller „ QLineEdit“ in einer Anwendung auf Gelb festzulegen. Dies lässt sich wie folgt erreichen:

qApp->setStyleSheet("QLineEdit { background-color: yellow }");

Wenn wir möchten, dass die Eigenschaft nur für die „ QLineEdits“ gilt, die Kinder (oder Enkel oder Urenkel) eines bestimmten Dialogs sind, würden wir stattdessen Folgendes tun:

myDialog->setStyleSheet("QLineEdit { background-color: yellow }");

Wenn die Eigenschaft nur für ein bestimmtes „ QLineEdit “ gelten soll, können wir ihm mit ` QObject::setObjectName()` einen Namen geben und es über einen ID-Selektor referenzieren:

myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");

Alternativ können wir die Eigenschaft „background-color“ direkt am „ QLineEdit “ festlegen und dabei den Selektor weglassen:

nameEdit->setStyleSheet("background-color: yellow");

Um einen guten Kontrast zu gewährleisten, sollten wir außerdem eine geeignete Farbe für den Text festlegen:

nameEdit->setStyleSheet("color: blue; background-color: yellow");

Es könnte sinnvoll sein, auch die Farben für den ausgewählten Text anzupassen:

nameEdit->setStyleSheet("color: blue;"
                        "background-color: yellow;"
                        "selection-color: yellow;"
                        "selection-background-color: blue;");

Anpassung mithilfe dynamischer Eigenschaften

Es gibt viele Situationen, in denen wir ein Formular mit Pflichtfeldern darstellen müssen. Um dem Benutzer anzuzeigen, dass ein Feld ausgefüllt werden muss, ist eine effektive (wenn auch ästhetisch fragwürdige) Lösung, für diese Felder Gelb als Hintergrundfarbe zu verwenden. Dies lässt sich mit Qt-Stylesheets sehr einfach umsetzen. Zunächst würden wir das folgende anwendungsweite Stylesheet verwenden:

*[mandatoryField="true"] { background-color: yellow }

Das bedeutet, dass jedes Widget, dessen Qt-Eigenschaft „ mandatoryField “ auf „true“ gesetzt ist, einen gelben Hintergrund erhält.

Anschließend würden wir für jedes Widget eines Pflichtfelds einfach spontan eine „ mandatoryField “-Eigenschaft erstellen und diese auf „true“ setzen. Zum Beispiel:

QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);

QLineEdit *emailEdit = new QLineEdit(this);
emailEdit->setProperty("mandatoryField", true);

QSpinBox *ageSpinBox = new QSpinBox(this);
ageSpinBox->setProperty("mandatoryField", true);

Anpassen eines QPushButton mithilfe des Box-Modells

Dieses Mal zeigen wir, wie man ein rotes „ QPushButton “ erstellt. Diese „ QPushButton “ wäre vermutlich mit einem sehr destruktiven Code verbunden.

Zunächst sind wir versucht, dieses Stylesheet zu verwenden:

QPushButton#evilButton { background-color: red }

Das Ergebnis ist jedoch eine langweilige, flache Schaltfläche ohne Rahmen:

Flacher roter Knopf

Was ist passiert?

  • Wir haben eine Anforderung gestellt, die sich allein mit den nativen Stilen nicht erfüllen lässt (beispielsweise lässt die native Windows-Theme-Engine keine Angabe der Hintergrundfarbe einer Schaltfläche zu).
  • Daher wird die Schaltfläche mithilfe von Stylesheets gerendert.
  • Da wir keine Werte für „border-width“ und „border-style“ angegeben haben, erhalten wir standardmäßig einen 0 Pixel breiten Rahmen mit dem Stil „ none “.

Verbessern wir die Situation, indem wir einen Rahmen festlegen:

QPushButton#evilButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-color: beige;
}

Roter Knopf mit beigem Rand

Das sieht schon viel besser aus. Allerdings wirkt die Schaltfläche etwas beengt. Legen wir mithilfe von „padding“ etwas Abstand zwischen dem Rahmen und dem Text fest. Außerdem legen wir eine Mindestbreite fest, runden die Ecken ab und wählen eine größere Schriftart, damit die Schaltfläche ansprechender aussieht:

QPushButton#evilButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    font: bold 14px;
    min-width: 10em;
    padding: 6px;
}

Roter Knopf mit rundem, beigem Rand und großer, fetter Schrift

Das einzige verbleibende Problem ist, dass die Schaltfläche nicht reagiert, wenn wir sie drücken. Wir können dies beheben, indem wir eine leicht abweichende Hintergrundfarbe festlegen und einen anderen Rahmenstil verwenden.

QPushButton#evilButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    font: bold 14px;
    min-width: 10em;
    padding: 6px;
}
QPushButton#evilButton:pressed {
    background-color: rgb(224, 0, 0);
    border-style: inset;
}

Anpassen des Menü-Indikators als Unterelement des QPushButton

Unterelemente ermöglichen den Zugriff auf die Unterelemente eines Widgets. Beispielsweise verfügt ein „ QPushButton “, der einem Menü zugeordnet ist (mithilfe von ` QPushButton::setMenu()`), über einen Menüindikator. Passen wir den Menüindikator für die rote Schaltfläche an:

QPushButton#evilButton::menu-indicator {
    image: url(myindicator.png);
}

Standardmäßig befindet sich der Menüindikator in der unteren rechten Ecke des Padding-Rechtecks. Wir können dies ändern, indem wir `subcontrol-position` und `subcontrol-origin` angeben, um den Indikator anders zu verankern. Wir können auch `top` und `left` verwenden, um den Indikator um einige Pixel zu verschieben. Zum Beispiel:

QPushButton::menu-indicator {
    image: url(myindicator.png);
    subcontrol-position: right center;
    subcontrol-origin: padding;
    left: -2px;
}

Dadurch wird die „ myindicator.png “ in der rechten Mitte des Padding-Rechtecks des „ QPushButton “ positioniert (weitere Informationen finden Sie unter „subcontrol-origin“ ).

Beispiel für einen komplexen Selektor

Da Rot offenbar unsere Lieblingsfarbe ist, lassen Sie uns den Text im „ QLineEdit “ rot färben, indem wir das folgende anwendungsweite Stylesheet festlegen:

QLineEdit { color: red }

Wir möchten jedoch visuell anzeigen, dass ein „ QLineEdit “ schreibgeschützt ist, indem wir ihn grau darstellen:

QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }

Irgendwann stellt unser Designteam die Anforderung, dass alle „ QLineEdit“-Elemente im Registrierungsformular (mit dem „ object name “ registrationDialog) braun sein sollen:

QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }
#registrationDialog QLineEdit { color: brown }

Nach einigen UI-Design-Besprechungen beschließen wir, dass alle unsere „ QDialogs“ braune „ QLineEdits“ haben sollen:

QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }
QDialog QLineEdit { color: brown }

Quiz: Was passiert, wenn wir ein schreibgeschütztes „ QLineEdit “ in einem „ QDialog “ haben? [Hinweis: Im Abschnitt „Konfliktlösung“ weiter oben wird erklärt, was in solchen Fällen geschieht.]

Anpassen bestimmter Widgets

Dieser Abschnitt enthält Beispiele zur Anpassung bestimmter Widgets mithilfe von Stylesheets.

Anpassen von QAbstractScrollArea

Der Hintergrund jedes „ QAbstractScrollArea “ (Elementansichten, „ QTextEdit “ und „ QTextBrowser “) kann mithilfe der Hintergrundeigenschaften festgelegt werden. Um beispielsweise ein Hintergrundbild festzulegen, das mit der Bildlaufleiste mitläuft:

QTextEdit, QListView {
    background-color: white;
    background-image: url(draft.png);
    background-attachment: scroll;
}

Wenn das Hintergrundbild an den Ansichtsbereich gebunden werden soll:

QTextEdit, QListView {
    background-color: white;
    background-image: url(draft.png);
    background-attachment: fixed;
}

Anpassen von QCheckBox

Die Gestaltung eines „ QCheckBox “ erfolgt fast identisch wie die eines „ QRadioButton “. Der Hauptunterschied besteht darin, dass ein „ QCheckBox “ mit drei Zuständen einen unbestimmten Zustand aufweist.

QCheckBox {
    spacing: 5px;
}

QCheckBox::indicator {
    width: 13px;
    height: 13px;
}

QCheckBox::indicator:unchecked {
    image: url(:/images/checkbox_unchecked.png);
}

QCheckBox::indicator:unchecked:hover {
    image: url(:/images/checkbox_unchecked_hover.png);
}

QCheckBox::indicator:unchecked:pressed {
    image: url(:/images/checkbox_unchecked_pressed.png);
}

QCheckBox::indicator:checked {
    image: url(:/images/checkbox_checked.png);
}

QCheckBox::indicator:checked:hover {
    image: url(:/images/checkbox_checked_hover.png);
}

QCheckBox::indicator:checked:pressed {
    image: url(:/images/checkbox_checked_pressed.png);
}

QCheckBox::indicator:indeterminate:hover {
    image: url(:/images/checkbox_indeterminate_hover.png);
}

QCheckBox::indicator:indeterminate:pressed {
    image: url(:/images/checkbox_indeterminate_pressed.png);
}

Anpassen von QComboBox

Wir betrachten ein Beispiel, bei dem die Dropdown-Schaltfläche einer „ QComboBox “ mit dem Rahmen der Combo-Box „verschmolzen“ erscheint.

QComboBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 18px 1px 3px;
    min-width: 6em;
}

QComboBox:editable {
    background: white;
}

QComboBox:!editable, QComboBox::drop-down:editable {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
}

/* QComboBox gets the "on" state when the popup is open */
QComboBox:!editable:on, QComboBox::drop-down:editable:on {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
                                stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
}

QComboBox:on { /* shift the text when the popup opens */
    padding-top: 3px;
    padding-left: 4px;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;

    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
    border-top-right-radius: 3px; /* same radius as the QComboBox */
    border-bottom-right-radius: 3px;
}

QComboBox::down-arrow {
    image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
}

QComboBox::down-arrow:on { /* shift the arrow when popup is open */
    top: 1px;
    left: 1px;
}

Das Popup der QComboBox ist ein QAbstractItemView und wird mithilfe des Nachkommen-Selektors gestaltet:

QComboBox QAbstractItemView {
    border: 2px solid darkgray;
    selection-background-color: lightgray;
}

Anpassen von QDockWidget

Die Titelleiste und die Schaltflächen eines „ QDockWidget “ lassen sich wie folgt anpassen:

QDockWidget {
    border: 1px solid lightgray;
    titlebar-close-icon: url(close.png);
    titlebar-normal-icon: url(undock.png);
}

QDockWidget::title {
    text-align: left; /* align the text to the left */
    background: lightgray;
    padding-left: 5px;
}

QDockWidget::close-button, QDockWidget::float-button {
    border: 1px solid transparent;
    background: darkgray;
    padding: 0px;
}

QDockWidget::close-button:hover, QDockWidget::float-button:hover {
    background: gray;
}

QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
    padding: 1px -1px -1px 1px;
}

Wenn man die Schaltflächen des Dock-Widgets nach links verschieben möchte, kann das folgende Stylesheet verwendet werden:

QDockWidget {
    border: 1px solid lightgray;
    titlebar-close-icon: url(close.png);
    titlebar-normal-icon: url(float.png);
}

QDockWidget::title {
    text-align: left;
    background: lightgray;
    padding-left: 35px;
}

QDockWidget::close-button, QDockWidget::float-button {
    background: darkgray;
    padding: 0px;
    icon-size: 14px; /* maximum icon size */
}

QDockWidget::close-button:hover, QDockWidget::float-button:hover {
    background: gray;
}

QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
    padding: 1px -1px -1px 1px;
}

QDockWidget::close-button {
    subcontrol-position: top left;
    subcontrol-origin: margin;
    position: absolute;
    top: 0px; left: 0px; bottom: 0px;
    width: 14px;
}

QDockWidget::float-button {
    subcontrol-position: top left;
    subcontrol-origin: margin;
    position: absolute;
    top: 0px; left: 16px; bottom: 0px;
    width: 14px;
}

Hinweis: Um den Trennbalken (Größenänderungsgriff) eines „ QDockWidget “ anzupassen, verwenden Sie QMainWindow::separator.

Anpassen von QFrame

Ein „ QFrame “ wird mithilfe des Box-Modells gestaltet.

QFrame, QLabel, QToolTip {
    border: 2px solid green;
    border-radius: 4px;
    padding: 2px;
    background-image: url(images/welcome.png);
}

Anpassen von QGroupBox

Sehen wir uns ein Beispiel an, bei dem der Titel der „ QGroupBox “ in die Mitte verschoben wird.

QGroupBox {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #E0E0E0, stop: 1 #FFFFFF);
    border: 2px solid gray;
    border-radius: 5px;
    margin-top: 1ex; /* leave space at the top for the title */
}

QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top center; /* position at the top center */
    padding: 0 3px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #FF0ECE, stop: 1 #FFFFFF);
}

Für eine QGroupBox mit Kontrollkästchen verwenden Sie das Untersteuerelement {#indicator-sub}{::indicator} und gestalten Sie es genau wie eine „ QCheckBox “ (d. h.)

QGroupBox::indicator {
    width: 13px;
    height: 13px;
}

QGroupBox::indicator:unchecked {
    image: url(:/images/checkbox_unchecked.png);
}

/* proceed with styling just like QCheckBox */

Anpassen von QHeaderView

QHeaderView wird wie folgt angepasst:

QHeaderView::section {
    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                      stop:0 #616161, stop: 0.5 #505050,
                                      stop: 0.6 #434343, stop:1 #656565);
    color: white;
    padding-left: 4px;
    border: 1px solid #6c6c6c;
}

QHeaderView::section:checked
{
    background-color: red;
}

/* style the sort indicator */
QHeaderView::down-arrow {
    image: url(down_arrow.png);
}

QHeaderView::up-arrow {
    image: url(up_arrow.png);
}

Anpassen von QLineEdit

Der Rahmen eines „ QLineEdit “ wird mithilfe des Box-Modells gestaltet. Um ein Eingabefeld mit abgerundeten Ecken zu erstellen, können wir Folgendes festlegen:

QLineEdit {
    border: 2px solid gray;
    border-radius: 10px;
    padding: 0 8px;
    background: yellow;
    selection-background-color: darkgray;
}

Das Passwortzeichen von Line-Edits, die im Echo-Modus von „ QLineEdit::Password “ laufen, kann wie folgt festgelegt werden:

QLineEdit[echoMode="2"] {
    lineedit-password-character: 9679;
}

Der Hintergrund eines schreibgeschützten „ QLineEdit “ lässt sich wie folgt anpassen:

QLineEdit:read-only {
    background: lightblue;
}

Anpassen der QListView

Die Hintergrundfarbe abwechselnder Zeilen lässt sich mithilfe des folgenden Stylesheets anpassen:

QListView {
    alternate-background-color: yellow;
}

Um beim Bewegen des Mauszeigers über Elemente einen speziellen Hintergrund anzuzeigen, können wir das Unterelement „::item“ verwenden. Zum Beispiel:

QListView {
    show-decoration-selected: 1; /* make the selection span the entire width of the view */
}

QListView::item:alternate {
    background: #EEEEEE;
}

QListView::item:selected {
    border: 1px solid #6a6ea9;
}

QListView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #ABAFE5, stop: 1 #8588B2);
}

QListView::item:selected:active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #6a6ea9, stop: 1 #888dd9);
}

QListView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #FAFBFE, stop: 1 #DCDEF1);
}

Anpassen von QMainWindow

Das Trennzeichen einer „ QMainWindow “ kann wie folgt gestaltet werden:

QMainWindow::separator {
    background: yellow;
    width: 10px; /* when vertical */
    height: 10px; /* when horizontal */
}

QMainWindow::separator:hover {
    background: red;
}

Anpassen von QMenu

Einzelne Einträge eines „ QMenu “ werden mithilfe des Unterelements „item“ wie folgt gestaltet:

QMenu {
    background-color: #ABABAB; /* sets background of the menu */
    border: 1px solid black;
}

QMenu::item {
    /* sets background of menu item. set this to something non-transparent
        if you want menu color and menu item color to be different */
    background-color: transparent;
}

QMenu::item:selected { /* when user selects item using mouse or keyboard */
    background-color: #654321;
}

Für eine fortgeschrittenere Anpassung verwenden Sie ein Stylesheet wie folgt:

QMenu {
    background-color: white;
    margin: 2px; /* some spacing around the menu */
}

QMenu::item {
    padding: 2px 25px 2px 20px;
    border: 1px solid transparent; /* reserve space for selection border */
}

QMenu::item:selected {
    border-color: darkblue;
    background: rgba(100, 100, 100, 150);
}

QMenu::icon:checked { /* appearance of a 'checked' icon */
    background: gray;
    border: 1px inset gray;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
}

QMenu::separator {
    height: 2px;
    background: lightblue;
    margin-left: 10px;
    margin-right: 5px;
}

QMenu::indicator {
    width: 13px;
    height: 13px;
}

/* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:non-exclusive:unchecked {
    image: url(:/images/checkbox_unchecked.png);
}

QMenu::indicator:non-exclusive:unchecked:selected {
    image: url(:/images/checkbox_unchecked_hover.png);
}

QMenu::indicator:non-exclusive:checked {
    image: url(:/images/checkbox_checked.png);
}

QMenu::indicator:non-exclusive:checked:selected {
    image: url(:/images/checkbox_checked_hover.png);
}

/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:exclusive:unchecked {
    image: url(:/images/radiobutton_unchecked.png);
}

QMenu::indicator:exclusive:unchecked:selected {
    image: url(:/images/radiobutton_unchecked_hover.png);
}

QMenu::indicator:exclusive:checked {
    image: url(:/images/radiobutton_checked.png);
}

QMenu::indicator:exclusive:checked:selected {
    image: url(:/images/radiobutton_checked_hover.png);
}

Anpassen von QMenuBar

QMenuBar wird wie folgt gestaltet:

QMenuBar {
    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                      stop:0 lightgray, stop:1 darkgray);
    spacing: 3px; /* spacing between menu bar items */
}

QMenuBar::item {
    padding: 1px 4px;
    background: transparent;
    border-radius: 4px;
}

QMenuBar::item:selected { /* when selected using mouse or keyboard */
    background: #a8a8a8;
}

QMenuBar::item:pressed {
    background: #888888;
}

Anpassen von QProgressBar

Der Rahmen, der Chunk und die Textausrichtung der „ QProgressBar “ können mithilfe von Stylesheets angepasst werden. Wenn jedoch eine Eigenschaft oder ein Unterelement angepasst wird, müssen auch alle anderen Eigenschaften oder Unterelemente angepasst werden.

Fortschrittsbalken mit 30 %

Beispielsweise ändern wir den Rahmen in Grau und den „Chunk“ in Cerulean.

QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
}

QProgressBar::chunk {
    background-color: #05B8CC;
    width: 20px;
}

Damit bleibt noch die Textausrichtung, die wir anpassen, indem wir den Text in der Mitte der Fortschrittsleiste positionieren.

QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}

Um die Abschnitte besser sichtbar zu machen, kann ein Rand hinzugefügt werden.

Fortschrittsbalken mit Markierungen

Im obigen Screenshot verwenden wir einen Rand von 0,5 Pixel.

QProgressBar::chunk {
    background-color: #CD96CD;
    width: 10px;
    margin: 0.5px;
}

Anpassen von QPushButton

Ein „ QPushButton “ wird wie folgt gestaltet:

QPushButton {
    border: 2px solid #8f8f91;
    border-radius: 6px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #f6f7fa, stop: 1 #dadbde);
    min-width: 80px;
}

QPushButton:pressed {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #dadbde, stop: 1 #f6f7fa);
}

QPushButton:flat {
    border: none; /* no border for a flat push button */
}

QPushButton:default {
    border-color: navy; /* make the default button prominent */
}

Für einen „ QPushButton “ mit Menü verwenden Sie das Unterelement „:: menu-indicator “.

QPushButton:open { /* when the button has its menu open */
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #dadbde, stop: 1 #f6f7fa);
}

QPushButton::menu-indicator {
    image: url(menu_indicator.png);
    subcontrol-origin: padding;
    subcontrol-position: bottom right;
}

QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {
    position: relative;
    top: 2px; left: 2px; /* shift the arrow by 2 px */
}

QPushButton s, die angekreuzt werden können, haben den Pseudo-Zustand :checked gesetzt.

Anpassen von QRadioButton

Die Anzeige eines „ QRadioButton “ kann wie folgt geändert werden:

QRadioButton::indicator {
    width: 13px;
    height: 13px;
}

QRadioButton::indicator::unchecked {
    image: url(:/images/radiobutton_unchecked.png);
}

QRadioButton::indicator:unchecked:hover {
    image: url(:/images/radiobutton_unchecked_hover.png);
}

QRadioButton::indicator:unchecked:pressed {
    image: url(:/images/radiobutton_unchecked_pressed.png);
}

QRadioButton::indicator::checked {
    image: url(:/images/radiobutton_checked.png);
}

QRadioButton::indicator:checked:hover {
    image: url(:/images/radiobutton_checked_hover.png);
}

QRadioButton::indicator:checked:pressed {
    image: url(:/images/radiobutton_checked_pressed.png);
}

Anpassen von QScrollBar

Das „ QScrollBar “ lässt sich mithilfe seiner Unterelemente wie Griff, Zusatzlinie, Unterlinie usw. stilistisch anpassen. Beachten Sie, dass bei der Anpassung einer Eigenschaft oder eines Unterelements auch alle anderen Eigenschaften oder Unterelemente angepasst werden müssen.

Grüne, stilisierte Bildlaufleiste

Die obige Bildlaufleiste wurde in Aquamarin mit einem durchgehenden grauen Rand gestaltet.

QScrollBar:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    height: 15px;
    margin: 0px 20px 0 20px;
}
QScrollBar::handle:horizontal {
    background: white;
    min-width: 20px;
}
QScrollBar::add-line:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}

Die Pfeile nach links und rechts haben einen durchgehenden grauen Rand mit weißem Hintergrund. Alternativ können Sie auch das Bild eines Pfeils einbetten.

QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    border: 2px solid grey;
    width: 3px;
    height: 3px;
    background: white;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

Wenn Sie möchten, dass die Scroll-Schaltflächen der Bildlaufleiste wie bei macOS nebeneinander (anstatt an den Rändern) angeordnet werden, können Sie das folgende Stylesheet verwenden:

QScrollBar:horizontal {
    border: 2px solid green;
    background: cyan;
    height: 15px;
    margin: 0px 40px 0 0px;
}

QScrollBar::handle:horizontal {
    background: gray;
    min-width: 20px;
}

QScrollBar::add-line:horizontal {
    background: blue;
    width: 16px;
    subcontrol-position: right;
    subcontrol-origin: margin;
    border: 2px solid black;
}

QScrollBar::sub-line:horizontal {
    background: magenta;
    width: 16px;
    subcontrol-position: top right;
    subcontrol-origin: margin;
    border: 2px solid black;
    position: absolute;
    right: 20px;
}

QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    width: 3px;
    height: 3px;
    background: pink;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

Die Bildlaufleiste sieht unter Verwendung des oben genannten Stylesheets wie folgt aus:

Farbige Bildlaufleiste

Um eine vertikale Bildlaufleiste anzupassen, verwenden Sie ein Stylesheet ähnlich dem folgenden:

 QScrollBar:vertical {
     border: 2px solid grey;
     background: #32CC99;
     width: 15px;
     margin: 22px 0 22px 0;
 }
 QScrollBar::handle:vertical {
     background: white;
     min-height: 20px;
 }
 QScrollBar::add-line:vertical {
     border: 2px solid grey;
     background: #32CC99;
     height: 20px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:vertical {
     border: 2px solid grey;
     background: #32CC99;
     height: 20px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }
 QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
     border: 2px solid grey;
     width: 3px;
     height: 3px;
     background: white;
 }

 QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
     background: none;
 }

Anpassen von QSizeGrip

QSizeGrip erfolgt in der Regel durch das Festlegen eines Bildes.

QSizeGrip {
    image: url(:/images/sizegrip.png);
    width: 16px;
    height: 16px;
}

Anpassen von QSlider

Sie können einen horizontalen Schieberegler wie folgt gestalten:

QSlider::groove:horizontal {
    border: 1px solid #999999;
    height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
    margin: 2px 0;
}

QSlider::handle:horizontal {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
    border: 1px solid #5c5c5c;
    width: 18px;
    margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
    border-radius: 3px;
}

Wenn Sie die Farbe der Schieberegler-Teile vor und nach dem Griff ändern möchten, können Sie die Unterelemente „add-page“ und „sub-page“ verwenden. Beispiel für einen vertikalen Schieberegler:

QSlider::groove:vertical {
    background: red;
    position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
    left: 4px; right: 4px;
}

QSlider::handle:vertical {
    height: 10px;
    background: green;
    margin: 0 -4px; /* expand outside the groove */
}

QSlider::add-page:vertical {
    background: white;
}

QSlider::sub-page:vertical {
    background: pink;
}

Anpassung von QSpinBox

QSpinBox kann wie unten gezeigt vollständig angepasst werden (das Stylesheet enthält Inline-Kommentare):

QSpinBox {
    padding-right: 15px; /* make room for the arrows */
    border-image: url(:/images/frame.png) 4;
    border-width: 3;
}

QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right; /* position at the top right corner */

    width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
    border-image: url(:/images/spinup.png) 1;
    border-width: 1px;
}

QSpinBox::up-button:hover {
    border-image: url(:/images/spinup_hover.png) 1;
}

QSpinBox::up-button:pressed {
    border-image: url(:/images/spinup_pressed.png) 1;
}

QSpinBox::up-arrow {
    image: url(:/images/up_arrow.png);
    width: 7px;
    height: 7px;
}

QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when value is max */
   image: url(:/images/up_arrow_disabled.png);
}

QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right; /* position at bottom right corner */

    width: 16px;
    border-image: url(:/images/spindown.png) 1;
    border-width: 1px;
    border-top-width: 0;
}

QSpinBox::down-button:hover {
    border-image: url(:/images/spindown_hover.png) 1;
}

QSpinBox::down-button:pressed {
    border-image: url(:/images/spindown_pressed.png) 1;
}

QSpinBox::down-arrow {
    image: url(:/images/down_arrow.png);
    width: 7px;
    height: 7px;
}

QSpinBox::down-arrow:disabled,
QSpinBox::down-arrow:off { /* off state when value in min */
   image: url(:/images/down_arrow_disabled.png);
}

Anpassen von QSplitter

Ein „ QSplitter “ leitet sich von einem „ QFrame “ ab und kann daher wie ein „ QFrame “ gestaltet werden. Der Griff wird mithilfe des Unterkontrolels „::handle“ angepasst.

QSplitter::handle {
    image: url(images/splitter.png);
}

QSplitter::handle:horizontal {
    width: 2px;
}

QSplitter::handle:vertical {
    height: 2px;
}

QSplitter::handle:pressed {
    url(images/splitter_pressed.png);
}

Anpassen der QStatusBar

Wir können wie folgt einen Hintergrund für die Statusleiste und einen Rahmen für Elemente innerhalb der Statusleiste festlegen:

QStatusBar {
    background: brown;
}

QStatusBar::item {
    border: 1px solid red;
    border-radius: 3px;
}

Beachten Sie, dass Widgets, die der ` QStatusBar ` hinzugefügt wurden, mithilfe der Nachkommer-Deklaration gestaltet werden können (d. h.)

QStatusBar QLabel {
    border: 3px solid white;
}

Anpassen von QTabWidget und QTabBar

Abbildung mehrerer Registerkarten

Für den obigen Screenshot benötigen wir ein Stylesheet wie folgt:

QTabWidget::pane { /* The tab widget frame */
    border-top: 2px solid #C2C7CB;
}

QTabWidget::tab-bar {
    left: 5px; /* move to the right by 5px */
}

/* Style the tab using the tab sub-control. Note that
    it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border: 2px solid #C4C4C3;
    border-bottom-color: #C2C7CB; /* same as the pane color */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px;
}

QTabBar::tab:selected, QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                                stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}

QTabBar::tab:selected {
    border-color: #9B9B9B;
    border-bottom-color: #C2C7CB; /* same as pane color */
}

QTabBar::tab:!selected {
    margin-top: 2px; /* make non-selected tabs look smaller */
}

Häufig möchten wir, dass sich die Registerkarten überlappen, sodass sie wie unten dargestellt aussehen:

Abbildung von überlappenden Registerkarten

Für ein Registerkarten-Widget, das wie oben aussieht, verwenden wir negative Ränder. Negative Werte rücken das Element näher an seine Nachbarn heran, als es standardmäßig der Fall wäre. Das resultierende Stylesheet sieht wie folgt aus:

QTabWidget::pane { /* The tab widget frame */
    border-top: 2px solid #C2C7CB;
}

QTabWidget::tab-bar {
    left: 5px; /* move to the right by 5px */
}

/* Style the tab using the tab sub-control. Note that
    it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border: 2px solid #C4C4C3;
    border-bottom-color: #C2C7CB; /* same as the pane color */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px;
}

QTabBar::tab:selected, QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                                stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}

QTabBar::tab:selected {
    border-color: #9B9B9B;
    border-bottom-color: #C2C7CB; /* same as pane color */
}

QTabBar::tab:!selected {
    margin-top: 2px; /* make non-selected tabs look smaller */
}

/* make use of negative margins for overlapping tabs */
QTabBar::tab:selected {
    /* expand/overlap to the left and right by 4px */
    margin-left: -4px;
    margin-right: -4px;
}

QTabBar::tab:first:selected {
    margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
}

QTabBar::tab:last:selected {
    margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
}

QTabBar::tab:only-one {
    margin: 0; /* if there is only one tab, we don't want overlapping margins */
}

Um die Registerkartenleiste in die Mitte zu verschieben (wie unten), benötigen wir das folgende Stylesheet:

Mehrere Registerkarten, die im Widget zentriert sind

QTabWidget::pane { /* The tab widget frame */
    border-top: 2px solid #C2C7CB;
    position: absolute;
    top: -0.5em;
}

QTabWidget::tab-bar {
    alignment: center;
}

/* Style the tab using the tab sub-control. Note that
    it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border: 2px solid #C4C4C3;
    border-bottom-color: #C2C7CB; /* same as the pane color */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px;
}

QTabBar::tab:selected, QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                                stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}

QTabBar::tab:selected {
    border-color: #9B9B9B;
    border-bottom-color: #C2C7CB; /* same as pane color */
}

Die Reißanzeige und die Scroll-Schaltflächen lassen sich wie folgt weiter anpassen:

QTabBar::tear {
    image: url(tear_indicator.png);
}

QTabBar::scroller { /* the width of the scroll buttons */
    width: 20px;
}

QTabBar QToolButton { /* the scroll buttons are tool buttons */
    border-image: url(scrollbutton.png) 2;
    border-width: 2px;
}

QTabBar QToolButton::right-arrow { /* the arrow mark in the tool buttons */
    image: url(rightarrow.png);
}

QTabBar QToolButton::left-arrow {
    image: url(leftarrow.png);
}

Sie können die Schaltfläche „Schließen“ wie folgt anpassen:

QTabBar::close-button {
    image: url(close.png)
    subcontrol-position: left;
}
QTabBar::close-button:hover {
    image: url(close-hover.png)
}

Anpassen von QTableView

Angenommen, wir möchten, dass das ausgewählte Element in „ QTableView “ einen Hintergrund hat, der von Bubblegum-Pink zu Weiß übergeht.

Tabellenansicht mit benutzerdefiniertem Stil

Dies ist mit der Eigenschaft „selection-background-color“ möglich, und die erforderliche Syntax lautet:

QTableView {
    selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,
                                stop: 0 #FF92BB, stop: 1 white);
}

Das Eck-Widget lässt sich mithilfe des folgenden Stylesheets anpassen

QTableView QTableCornerButton::section {
    background: red;
    border: 2px outset red;
}

Auch die Kontrollkästchenanzeige der „ QTableView “ lässt sich anpassen. Im folgenden Codeausschnitt wird die Anzeige „ background-color “ im nicht markierten Zustand angepasst:

QTableView::indicator:unchecked {
    background-color: #d7d6d5
}

Anpassen der QToolBar

Der Hintergrund und der Griff einer „ QToolBar “ werden wie folgt angepasst:

QToolBar {
    background: red;
    spacing: 3px; /* spacing between items in the tool bar */
}

QToolBar::handle {
    image: url(handle.png);
}

Anpassen von QToolBox

Die Registerkarten der „ QToolBox “ werden mithilfe des Untersteuerelements „tab“ angepasst.

QToolBox::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border-radius: 5px;
    color: darkgray;
}

QToolBox::tab:selected { /* italicize selected tabs */
    font: italic;
    color: white;
}

Anpassen von QToolButton

Es gibt drei Arten von QToolButtons.

QToolButton { /* all types of tool button */
    border: 2px solid #8f8f91;
    border-radius: 6px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #f6f7fa, stop: 1 #dadbde);
}

QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
    padding-right: 20px; /* make way for the popup button */
}

QToolButton:pressed {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #dadbde, stop: 1 #f6f7fa);
}

/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton::menu-button {
    border: 2px solid gray;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    /* 16px width + 4px for border = 20px allocated above */
    width: 16px;
}

QToolButton::menu-arrow {
    image: url(downarrow.png);
}

QToolButton::menu-arrow:open {
    top: 1px; left: 1px; /* shift it a bit */
}

Anpassung von QToolTip

QToolTip wird genau wie ein „ QLabel “ angepasst. Auf Plattformen, die dies unterstützen, kann zusätzlich die Eigenschaft „opacity“ gesetzt werden, um die Deckkraft anzupassen.

Beispiel:

QToolTip {
    border: 2px solid darkkhaki;
    padding: 5px;
    border-radius: 3px;
    opacity: 200;
}

Anpassen von QTreeView

Die Hintergrundfarbe abwechselnder Zeilen lässt sich mit dem folgenden Stylesheet anpassen:

QTreeView {
    alternate-background-color: yellow;
}

Um beim Bewegen des Mauszeigers über Elemente einen speziellen Hintergrund darzustellen, können wir das Unterelement ::item verwenden. Beispiel:

QTreeView {
    show-decoration-selected: 1;
}

QTreeView::item {
     border: 1px solid #d9d9d9;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

QTreeView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
    border: 1px solid #bfcde4;
}

QTreeView::item:selected {
    border: 1px solid #567dbc;
}

QTreeView::item:selected:active{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);
}

QTreeView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf);
}

Die Zweige eines „ QTreeView “ werden mithilfe des Unterelements „::branch“ gestaltet. Das folgende Stylesheet weist den verschiedenen Zuständen beim Zeichnen eines Zweigs Farben zu.

QTreeView::branch {
        background: palette(base);
}

QTreeView::branch:has-siblings:!adjoins-item {
        background: cyan;
}

QTreeView::branch:has-siblings:adjoins-item {
        background: red;
}

QTreeView::branch:!has-children:!has-siblings:adjoins-item {
        background: blue;
}

QTreeView::branch:closed:has-children:has-siblings {
        background: pink;
}

QTreeView::branch:has-children:!has-siblings:closed {
        background: gray;
}

QTreeView::branch:open:has-children:has-siblings {
        background: magenta;
}

QTreeView::branch:open:has-children:!has-siblings {
        background: green;
}

So farbenfroh das auch ist, lässt sich anhand der folgenden Bilder ein anschaulicheres Beispiel erstellen:

Senkrechte LinieVerbindungslinie für ListenZeile zum Abschluss der ListePfeil nach rechtsNach unten zeigender Pfeil
vline.pngbranch-more.pngbranch-end.pngbranch-closed.pngbranch-open.png
QTreeView::branch:has-siblings:!adjoins-item {
    border-image: url(vline.png) 0;
}

QTreeView::branch:has-siblings:adjoins-item {
    border-image: url(branch-more.png) 0;
}

QTreeView::branch:!has-children:!has-siblings:adjoins-item {
    border-image: url(branch-end.png) 0;
}

QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
        border-image: none;
        image: url(branch-closed.png);
}

QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings  {
        border-image: none;
        image: url(branch-open.png);
}

Die resultierende Baumansicht sieht wie folgt aus:

Baumstruktur mit gestalteten Zweigen

Häufige Fehler

In diesem Abschnitt werden einige häufige Fehler bei der Verwendung von Stylesheets aufgeführt.

QPushButton und Bilder

Beim Gestalten eines „ QPushButton “ ist es oft wünschenswert, ein Bild als Schaltflächengrafik zu verwenden. Häufig wird versucht, die Eigenschaft „background-image“ zu nutzen, doch dies hat eine Reihe von Nachteilen: So wird der Hintergrund beispielsweise oft hinter der Schaltflächendekoration verborgen, da er nicht als Hintergrund betrachtet wird. Außerdem wird bei einer Größenänderung der Schaltfläche der gesamte Hintergrund gestreckt oder gekachelt, was nicht immer gut aussieht.

Es ist besser, die Eigenschaft „border-image“ zu verwenden, da sie das Bild unabhängig vom Hintergrund immer anzeigt (man kann es mit einem Hintergrund kombinieren, wenn dieser Alpha-Werte enthält) und über spezielle Einstellungen verfügt, um der Größenänderung der Schaltfläche Rechnung zu tragen.

Betrachten Sie den folgenden Codeausschnitt:

        QPushButton {
            color: grey;
            border-image: url(/home/kamlie/code/button.png) 3 10 3 10;
            border-top: 3px transparent;
            border-bottom: 3px transparent;
            border-right: 10px transparent;
            border-left: 10px transparent;
        }

Dadurch entsteht eine Schaltfläche, die wie folgt aussieht:

Schaltfläche mit Hintergrund

Die Zahlen hinter der URL geben jeweils die Pixelwerte für oben, rechts, unten und links an. Diese Zahlen entsprechen dem Rahmen und sollten sich bei einer Größenänderung nicht dehnen. Wenn du die Größe der Schaltfläche änderst, wird der mittlere Teil des Bildes in beide Richtungen gestreckt, während die im Stylesheet angegebenen Pixelwerte unverändert bleiben. Dadurch sehen die Ränder der Schaltfläche natürlicher aus, etwa so:

Schaltfläche mit festgelegten Rahmengrößen

Mit Rahmen

Schaltfläche ohne festgelegte Rahmenmaße

Ohne Rahmen

Siehe auch „Styling-Ansätze für Qt Widgets “, „Unterstützte HTML-Teilmenge“ und „ QStyle “.

Referenz zu Stylesheets Layout-Verwaltung

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.