Python 3 - Lernen und professionell anwenden

Kapitel 28

Benutzungsoberflächen mit Qt

788

Die Schrift kann auch über Stylesheets gestaltet werden. Dazu mehr im folgenden

Abschnitt.

28.14 Stylesheets

Sie können das Aussehen von Widgets (Farben, Umrandungen etc.) mithilfe so genannter

Stylesheets verändern. In diesem Abschnitt konzentrieren wir uns auf Farben, aber in der

Qt-Dokumentation finden Sie viele weitere Beispiele (

http://doc.qt.io/qt-5/stylesheet-

examples.html

). Ein Stylesheet ist ein String, in dem Merkmale des Aussehens (Attribute),

die vom vorgegebenen Standard abweichen sollen, festgelegt sind. Es gibt verschiedene

Möglichkeiten, Stylesheets zu verwenden, z.B.:

쐽 ein allgemeines Stylesheet für die gesamte Applikation

쐽 gesonderte Stylesheets für einzelne Widgets

Ein Stylesheet für die gesamte Applikation

Mit einem einzigen Stylesheet können Sie für bestimmte Widget-Typen (z.B. LineEdit und

PushButton) das Aussehen gestalten. Der Vorteil dieser Methode ist, dass Sie so für alle

Widgets dieser Typen einen einheitlichen Stil festlegen. Am besten definieren Sie zu Beginn

des Programmtextes eine Konstante mit einem langen String (drei Anführungszeichen),

der das Stylesheet enthält. Beim folgenden Beispiel haben alle Schaltflächen einen grauen

Hintergrund und eine weiße Schrift. Das

LineEdit-Widget hat eine hellblaue Schrift (Abbil-

dung 28.12).

Zur Spezifikation einer Farbe verwenden Sie entweder den Namen (

yellow, blue, white

etc.) oder einen Ausdruck der Form rgb(r, g, b). Dabei sind die drei Argumente Zahlen

zwischen 0 und 255, die jeweils den Rot-, Grün- und Blauanteil angeben.

Am Ende des Programmtextes weisen Sie das Stylesheet der gesamten Applikation zu:

Abbildung 28.12 zeigt den Browser aus dem letzten Abschnitt mit diesem Applikationssty-

lesheet.

STYLE = """

QPushButton {

background: gray;

color: white;

}

QLineEdit {

color: rgb(120, 120, 230);

}

"""

app = QApplication(sys.argv)

app.setStyleSheet(STYLE)

789

28.14

Stylesheets

Abb. 28.12: Anwendungsfenster mit besonderem Stil für Schaltflächen und Eingabezeilen

Stylesheet für ein einzelnes Widget

Es gibt viele Situationen, in denen Sie einzelnen Widgets ein und desselben Typs ein unter-

schiedliches Aussehen verleihen wollen. Vielleicht möchten Sie, dass man eine bestimmte

Schaltfläche im Anwendungsfenster leicht erkennen kann. Mit der Methode

setStyle-

sheet()

können Sie jedem einzelnen Widget ein besonderes Stylesheet zuweisen. Damit

werden etwaige Einstellungen für die gesamte Klasse (die sich in einem globalen Stylesheet

befinden, das der Applikation zugeordnet ist) überschrieben. Die folgenden Anweisungen

versehen eine Schaltfläche mit einem Hintergrundbild. Die Bilddatei enthält eine kleine

gepunktete quadratische Fläche, mit der die Schaltfläche wie mit Kacheln vollständig gefüllt

wird (Abbildung 28.13, links).

Ein Stylesheet mit mehreren Merkmalen ist am besten ein langer String. Im folgenden Bei-

spiel hat die Schaltfläche einen grünen Hintergrund und weiße Schrift. Um den Text herum

ist ein Abstand von 20 Pixel zur Umrandung (Abbildung 28.13, rechts).

Abb. 28.13: Schaltflächen mit besonderem Aussehen

self.searchButton = QPushButton("Suchen", self)

self.searchButton.setStyleSheet(

"background-image: url(punkte.png);")

self.searchButton.setStyleSheet("""background: green;

color: white;

padding: 20px """)

Kapitel 28

Benutzungsoberflächen mit Qt

790

Farbverläufe

Im Stylesheet können Sie auch einen Farbverlauf definieren. Das macht insbesondere große

leere Flächen interessanter. Bei einem einfachen linearen Farbverlauf müssen Sie zwei

Dinge festlegen:

쐽 Die Richtung des Farbverlaufs (z.B. von oben nach unten). Bei Qt geben Sie die Rich-

tung durch die Koordinaten des Anfangspunktes

(x1, y1) und des Endpunktes(x2,

y2)

eines gedachten Pfeils an.

쐽 Die Farben an den beiden Enden des Farbverlaufs. Bei Qt geben Sie zu den relativen

Positionsangaben

stop: 0 und stop: 1 jeweils eine Farbe an.

Hier sind drei Beispiele für Stylesheet-Einträge für eine Hintergrundfarbe, die Farbverläufe

wie in Abbildung 28.14 erzeugen.

Abb. 28.14: Lineare Farbverläufe mit unterschiedlichen Richtungen

Attribut Erklärung und Beispiele für Werte

background

Hintergrundfarbe, z.B. yellow oder rgb(255, 255, 0) oder

transparent

background-image

Hintergrundbild (z.B. PNG-Datei), z.B. url(image.png)

color

Farbe des Textes auf Widgets, z.B. black oder rgb(0, 0, 0)

padding

Abstand der Schrift zum Rand des Widgets in Pixel, z.B. 4px

selection-color

Farbe des ausgewählten Textes, z.B. blue

selection-background-

color

Hintergrundfarbe im ausgewählten Textbereich, z.B. yellow

Tabelle 28.9: Einige Attribute zur Beschreibung des Aussehens von Widgets in Stylesheets

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

stop: 0 white, stop: 1 black);

background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,

stop: 0 white, stop: 1 black);

background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1,

stop: 0 white, stop: 1 black);