14. Okt 2019
Lesedauer 14 Min.
Oberflächen für Python
UIs mit Python und Qt5
Auch in rechenintensiven Anwendungen will man Daten eingeben und saubere Ausgaben erhalten. Qt5 als Benutzerschnittstelle realisiert beides in ansprechender Form.
dotnetpro
Benutzerschnittstellen können mit vielen Bibliotheken erstellt werden. Eine ganze Reihe der bekannten Bibliotheken läuft unter Microsoft Windows: die MFC (Microsoft Foundation Classes), die aber schon ein bisschen älter ist. Windows Forms – auch nicht mehr ganz neu. Und natürlich WPF (Windows Presentation Foundation). Diese in der Windows-Welt weit verbreitete neuere Bibliothek ist modern und vielseitig anwendbar.Manches UI-Framework hat jedoch den Nachteil, dass es sich entweder nur mit einer bestimmten Programmiersprache anwenden oder nur auf einer bestimmten Plattform einsetzen lässt.In diesem Artikel soll die UI-Bibliothek Qt5 (lies englisch: cute [kju:t]) vorgestellt werden, die sich auf vielen Plattformen und mit diversen Programmiersprachen benutzen lässt. Im ersten Artikel [1] dieser Qt-Serie wurde die Programmiersprache C++ für die Erstellung der Benutzerschnittstellen eingesetzt. Im vorliegenden Artikel verwenden wir die ebenfalls weit verbreitete Sprache Python. Außerdem kommt hierbei auch wieder der Qt-Designer für das Fensterdesign zum Einsatz.
Installation
Wenn Sie die Beispiele, die wir in diesem Artikel vorstellen, nachvollziehen wollen, dann sollten Sie (wenn erforderlich) zunächst Python 3.6 auf dem Rechner installieren. Danach können Sie die Bibliothek PyQt5 herunterladen und mit dem Befehlpip3 <span class="hljs-keyword">install</span> PyQt5
im Kommandozeilenfenster installieren. Wenn noch nicht vorhanden, laden Sie nun auf der Webseite von Qt den Qt-Designer [2] herunter und installieren ihn. Und schon kann es losgehen!
Ein erstes Beispiel
Die Benutzerschnittstelle einer Python-Qt-Anwendung wird am besten mit dem Qt-Designer erstellt (Bild 1).
Das Startfensterdes Qt-Designers(Bild 1)
Autor
Die folgenden Bereiche sind im Qt-Designer benutzbar:
- 1: Start-Dialog mit Fenstertyp-Auswahl
- 2: Liste aller Widgets
- 3: Objekt-Inspektor
- 4: Fenster für die Einstellung von Eigenschaften
- 5: Editor für Signale und Slots sowie Aktionen
Eine einfacheBenutzerschnittstelle(Bild 2)
Autor
Die Benutzerschnittstelle des kleinen Rechners ist nun fertig und wird in der Datei Rechner.ui gespeichert. Als Nächstes benötigen Sie ein Kommandozeilen-Fenster. Wechseln Sie in das Verzeichnis, in dem die Datei Rechner.ui gespeichert wurde, und führen Sie folgenden Befehl aus:
<span class="hljs-selector-tag">pyuic5</span> <span class="hljs-selector-tag">Rechner</span><span class="hljs-selector-class">.ui</span> –<span class="hljs-selector-tag">o</span> <span class="hljs-selector-tag">Rechner_ui</span><span class="hljs-selector-class">.py</span>
Die Datei Rechner.ui vom Qt-Designer enthält das erstellte User-Interface in XML-Code. Das Tool pyuic5 wandelt den XML-Code in Python-Code um. Die Datei Rechner_ui.py enthält nun also den erforderlichen Python-Code, um das Fenster für den kleinen Rechner mit seinen Steuerelementen zur Laufzeit aufzubauen.Jetzt wird noch eine weitere Python-Datei Rechner.py benötigt, die das Fenster initialisiert und darstellt. Listing 1 zeigt den dafür erforderlichen Code.
Listing 1: Der Code für die Darstellung des Fensters
# Einfacher Rechner <br/><span class="hljs-keyword">import</span> sys <br/><span class="hljs-keyword">from</span> PyQt5.QtWidgets <span class="hljs-keyword">import</span> QDialog, QApplication <br/><span class="hljs-keyword">from</span> Rechner_ui <span class="hljs-keyword">import</span> * <br/><br/><span class="hljs-keyword">class</span> MyForm(QDialog): <br/> # Initialisierung des Dialog-Fensters <br/> def __init__(self): <br/> super().__init__() <br/> self.ui = Ui_Dialog() <br/> self.ui.setupUi(self) <br/> self.show() <br/> <br/>###### main ######################## <br/><span class="hljs-keyword">if</span> __name__ == <span class="hljs-string">"__main__"</span>: <br/> # Erzeugung eines Application-Objekts <br/> app = QApplication(sys.argv) <br/> # Erzeugung des Fensters <br/> win = MyForm() <br/> # Darstellung des Fensters <br/> win.show() <br/> <br/> # Ordnungsgemässe Beendigung der Anwendung <br/> sys.exit(app.exec_()) <br/>###### End <span class="hljs-keyword">of</span> main #################
Nach dem Import der benötigten Bibliotheken wird zunächst die Klasse MyForm implementiert, die von QDialog abgeleitet ist. Hier wird im Member self.ui die Klasse Ui_Dialog instanziert, die sich in der eben erzeugten Datei Rechner_ui.py befindet.In der main-Funktion wird nun ein Application-Objekt erstellt und initialisiert. Danach wird das Fenster der Klasse MyForm erstellt und mit der show-Methode dargestellt. Der Aufruf von sys.exit() garantiert eine „ordentliche“ Beendigung der Anwendung mit der Auflösung aller benutzten Ressourcen. Die Anwendung selbst startet durch den Aufruf von app.exec_(). Dieser Aufruf blockiert, bis das Fenster geschlossen wird.Das Rechner-Programm lässt sich nun durch den Aufruf
<span class="hljs-keyword">python</span> Rechner.<span class="hljs-keyword">py</span>
starten. Leider lässt sich mit dem Rechner noch nicht viel anfangen, da der Code für die Ausführung einer Addition oder Subtraktion noch nicht implementiert ist.Die beiden PushButton-Elemente müssen also noch mit den passenden Funktionen verbunden werden, welche die jeweilige Rechenoperation implementiert. Hierzu kommt der Signal/Slot-Mechanismus von Qt zum Einsatz, der bereits in [1] ausführlich erläutert wurde. Das Signal clicked des Addiere-PushButtons wird mit der aufzurufenden Methode self.add verbunden. Entsprechend wird das gleiche Signal des Subtrahiere-Buttons mit der Methode self.sub verbunden. Dieser Code wird im Konstruktor von MyForm implementiert. Die vollständige Implementierung der Klasse MyForm sehen Sie in Listing 2. Die neuen Codezeilen sind darin in blauer Schrift dargestellt.
Listing 2: Die vollständige Rechner-Klasse MyForm
class MyForm(QDialog): <br/> # Initialisierung des Dialog-Fensters <br/> def __init__(<span class="hljs-keyword">self</span>): <br/> <span class="hljs-keyword">super</span>().__init__() <br/> <span class="hljs-keyword">self</span>.ui = Ui_Dialog() <br/> <span class="hljs-keyword">self</span>.ui.setupUi(<span class="hljs-keyword">self</span>) <br/> <span class="hljs-keyword">self</span>.ui.pushButtonAdd.clicked.connect(<span class="hljs-keyword">self</span>.add) <br/> <span class="hljs-keyword">self</span>.ui.pushButtonSub.clicked.connect(<span class="hljs-keyword">self</span>.sub) <br/> <span class="hljs-keyword">self</span>.show() <br/> <br/> def add(<span class="hljs-keyword">self</span>): <br/> zahl1 = <span class="hljs-keyword">float</span>(<span class="hljs-keyword">self</span>.ui.lineEditZahl1.text()) <br/> zahl2 = <span class="hljs-keyword">float</span>(<span class="hljs-keyword">self</span>.ui.lineEditZahl2.text()) <br/> result = zahl1 + zahl2; <br/> <span class="hljs-keyword">self</span>.ui.lineEditResult.setText(<span class="hljs-keyword">str</span>(result)) <br/> <br/> def sub(<span class="hljs-keyword">self</span>): <br/> zahl1 = <span class="hljs-keyword">float</span>(<span class="hljs-keyword">self</span>.ui.lineEditZahl1.text()) <br/> zahl2 = <span class="hljs-keyword">float</span>(<span class="hljs-keyword">self</span>.ui.lineEditZahl2.text()) <br/> result = zahl1 - zahl2; <br/> <span class="hljs-keyword">self</span>.ui.lineEditResult.setText(<span class="hljs-keyword">str</span>(result))
Im Konstruktor von MyForm werden die beiden Signale mit ihren Slots verbunden. Die Slot-Funktionen werden in der Klasse MyForm implementiert. Zunächst werden die Texte der beiden oberen LineEdit-Controls mit der text-Methode abgefragt und in Fließkomma-Variablen umgewandelt. Nun kann die Berechnung erfolgen. Das Ergebnis wird in einen String konvertiert und im lineEditResult-Control mittels der setText-Methode ausgegeben.Die main-Funktion der Anwendung bleibt in diesem Beispiel unverändert. An dieser Stelle sei noch erwähnt, dass sich die UI-Datei Rechner.ui mithilfe des Qt-Designers jederzeit ändern lässt. Danach ist jedoch das Konvertierungs-Tool pyuic5 wieder auszuführen, um den korrekten neuen Python-Code zu erzeugen. Natürlich ist es dann gegebenenfalls notwendig, auch die Fensterklasse MyForm in der Datei Rechner.py anzupassen.
Slots und Signale
Alle Steuerelemente von Qt kommunizieren mit dem Code der Anwendung mithilfe von Signalen, die an bestimmte Slots gebunden werden. Ein Button-Control kann zum Beispiel das Signal clicked auslösen, welches dann an eine Funktion gebunden wird. Die Ausführung des Codes dieser Funktion erfolgt genau dann, wenn auf den Button geklickt und dadurch das Signal ausgelöst wird.In Listing 2 wurden die Signale der PushButton-Controls direkt im Python-Code mit den entsprechenden Slots verbunden. Es gibt aber noch eine andere Methode im Qt-Designer, um Signale mit Slots durch wenige Mausklicks miteinander zu verbinden.Für das folgende Beispiel soll die einfache Benutzerschnittstelle aus Bild 3 zum Einsatz kommen. Das PushButton-Control wird mit dem Text Alles selektieren und das LineEdit-Control mit dem Text Hallo, Qt5! versehen. Die Namen der Steuerelemente sind in diesem Beispiel unerheblich und bleiben unverändert. Nun wird im Qt-Designer der Befehl Edit Signal/Slots im Menü Edit aufgerufen. In diesem Modus kann man verschiedene Steuerelemente grafisch miteinander verbinden. Dazu klickt man zuerst auf das PushButton-Control mit der linken Maustaste, zieht dann die Maus zum zweiten Control (hier: das LineEdit-Control) und lässt dann die Maustaste los. Es erscheint nun ein Dialog, in dem im linken Listenfeld das Signal clicked und im rechten Listenfeld der Slot selectAll ausgewählt wird. In diesem Fall soll beim Anklicken des Buttons der gesamte Text in der Textbox selektiert werden. Die Aktion stellt Qt-Designer grafisch durch eine Linienverbindung dar.
Die Benutzerschnittstellefür die Signal/Slot-Erstellung im Qt-Designer (Bild 3)
Autor
Wenn alle gewünschten Verbindungen eingerichtet sind, wird die [Esc]-Taste gedrückt, um den speziellen Signal/Slot-Modus zu beenden. Dieses Design wird in der Datei Designer.ui abgespeichert und mit dem Converter pyuic5 in eine Python-Klasse umgewandelt (pyuic5 Designer.ui –o Designer_ui.py). Wenn Sie einen Blick in die Datei Designer_ui.py werfen, finden Sie etwa in der Mitte auch den entsprechenden connect-Aufruf für die Steuerelemente pushButton und lineEdit.Listing 3 zeigt das Hauptprogramm in der Datei Designer.py. Es beinhaltet die Klasse MyForm, die initialisiert wird, nun aber keine connect-Aufrufe enthält. Die main-Funktion ist genauso wie im ersten Beispiel aufgebaut.
Listing 3: Die Datei Designer.py
# Signal &amp; Slot mit dem Qt-Designer <br/><span class="hljs-keyword">import</span> sys <br/><span class="hljs-keyword">from</span> PyQt5.QtWidgets <span class="hljs-keyword">import</span> QDialog, QApplication <br/><span class="hljs-keyword">from</span> Designer_ui <span class="hljs-keyword">import</span> * <br/><br/><span class="hljs-keyword">class</span> MyForm(QDialog): <br/> # Initialisierung des Dialog-Fensters <br/> def __init__(self): <br/> super().__init__() <br/> self.ui = Ui_Dialog() <br/> self.ui.setupUi(self) <br/> self.show() <br/> <br/>###### main ######################## <br/><span class="hljs-keyword">if</span> __name__ == <span class="hljs-string">"__main__"</span>: <br/> app = QApplication(sys.argv) <br/> win = MyForm() <br/> win.show() <br/> <br/> sys.exit(app.exec_()) <br/>###### End <span class="hljs-keyword">of</span> main ################# Dialoge mit Qt
In den Qt-Bibliotheken stehen Standarddialoge für die Farb-, Font- oder Dateiauswahl zur Verfügung. Außerdem gibt es das Control QInputDialog, das für einfache Eingaben verwendbar ist. Und natürlich kann man eigene Dialogfenster designen, um spezielle Eingaben für die Anwendungen zu ermöglichen.Das erste Beispiel stellt das einfach zu benutzende QInputDialog-Control vor. Es soll ein Eingabefenster erzeugt werden, das den Anwender abfragt, in welchem Land er sich aufhält. Es soll eine Liste von Ländern zur Auswahl vorgegeben sein. Mit dem Qt-Designer erstellt man zunächst eine einfache Benutzerschnittstelle mit einem Label, einem LineEdit-Control und einem Button (Bild 4).
UI für die Auswahleines Landes(Bild 4)
Autor
Alle Steuerelemente behalten in diesem Beispiel ihre automatisch generierten Namen. Das UI wurde in der Datei InputDialog.ui abgespeichert und wird nun konvertiert (pyuic5 InputDialog.ui –o InputDialog_ui.py).In der Datei InputDialog.py wird die Fensterklasse MyForm implementiert (Listing 4). Das Signal clicked des Buttons wird mit dem Slot getCountryDialog verbunden. In dieser Funktion wird zunächst eine Liste der auswählbaren Länder erstellt und danach erfolgt der Aufruf des QInputDialogs mit der Methode getItem. Hier gibt es verschiedene Möglichkeiten. Durch die Benutzung der getInt-, getDouble- oder getText-Funktion lassen sich unterschiedliche Datentypen (Integer, Fließkomma oder Text) einlesen. Die Funktion getItem stellt eine Combobox dar und man kann ein Element aus einer Liste von Strings auswählen und zurückgeben. Der numerische Wert beim Aufruf des Dialogs nach dem Parameter countries gibt an, welcher Eintrag in der Combobox als Default-Wert selektiert werden soll (hier: Deutschland). Eine Kopie des ausgewählten Landes landet schließlich im LineEdit-Control des Hauptfensters.
Listing 4: Auswahl mit einem QInputDialog
<span class="hljs-keyword">import</span> sys <br/><span class="hljs-keyword">from</span> PyQt5.QtWidgets <span class="hljs-keyword">import</span> QDialog, QInputDialog, QApplication <br/><span class="hljs-keyword">from</span> InputDialog_ui <span class="hljs-keyword">import</span> * <br/><br/><span class="hljs-keyword">class</span> MyForm(QDialog): <br/> # Initialisierung des Dialog-Fensters <br/> def __init__(self): <br/> super().__init__() <br/> self.ui = Ui_Dialog() <br/> self.ui.setupUi(self) <br/> # Im Slot wird der QInputDialog aufgerufen <br/> self.ui.pushButton.clicked.connect(<br/> self.getCountryDialog) <br/> self.show() <br/> <br/> def getCountryDialog(self): <br/> countries = (<span class="hljs-string">"Frankreich"</span>, <span class="hljs-string">"Belgien"</span>, <br/> <span class="hljs-string">"Deutschland"</span>, <span class="hljs-string">"Spanien"</span>, <span class="hljs-string">"Italien"</span>, <br/> <span class="hljs-string">"Schweiz"</span>) <br/> countryName, ok = QInputDialog.getItem(<br/> self, <span class="hljs-string">"Eingabe des Landes"</span>, <span class="hljs-string">"Liste aller </span><br/><span class="hljs-string"> Länder:"</span>, countries, <span class="hljs-number">2</span>, <span class="hljs-literal">False</span>) <br/> # Auswahl <span class="hljs-keyword">in</span> Textbox kopieren <br/> <span class="hljs-keyword">if</span> ok and countryName: <br/> self.ui.lineEdit.setText(countryName) <br/> <br/>###### main ######################## <br/><span class="hljs-keyword">if</span> __name__ == <span class="hljs-string">"__main__"</span>: <br/> # Erzeugung eines Application-Objekts <br/> app = QApplication(sys.argv) <br/> # Erzeugung des Fensters <br/> win = MyForm() <br/> # Darstellung des Fensters <br/> win.show() <br/> <br/> # Ordnungsgemässe Beendigung der Anwendung <br/> sys.exit(app.exec_()) <br/>###### End <span class="hljs-keyword">of</span> main #################
Die main-Funktion der Anwendung behält ihr bereits bekanntes Aussehen. Bild 5 zeigt das Eingabedialogfenster der Demoanwendung.
Die Auswahl eines Landesmit dem QInputDialog-Fenster(Bild 5)
Autor
Im nächsten Beispiel sollen in einem Fenster ein Menü und die Standarddialoge für das Öffnen und Speichern von Dateien verwendet werden.Mit dem Qt-Designer wird zunächst ein neues Projekt vom Typ Main Window erzeugt. Bei diesem Projekttyp wird das Hauptfenster mit einem Menü und einer Statuszeile versehen. Im Beispielprogramm sollen vier Menüpunkte implementiert werden:
- Neu [Strg+N]
- Öffnen … [Strg+F]
- Speichern … [Strg+S]
- Beenden
Die Bearbeitungeine Menübefehls(Bild 6)
Autor
Zunächst sollte man nun prüfen, ob der angegebene Objektname in Ordnung ist. Hier muss man darauf achten, dass der Qt-Designer zum Beispiel Umlaute aus dem Objektnamen entfernt. Dadurch entstehen dann manchmal etwas unleserliche Namen, die korrigiert werden sollten. Weiterhin kann man hier den gewünschten Tooltipp-Text eingeben und eine Kurztaste (zum Beispiel [Strg+N]) definieren. Für die Definition der Kurztaste klickt man einfach in das Eingabefeld und gibt dann die gewünschte Tastenkombination über die Tastatur ein.Um das kleine Programm noch etwas sinnvoller zu gestalten, fügen wir in das Hauptfenster zusätzlich ein PlainTextEdit-Steuerelement ein, um einen ganz einfachen Texteditor zu bekommen. Dieses Steuerelement vergrößern wir so, dass es das gesamte Fenster ausfüllt.Nun wird die erstellte Benutzerschnittstelle in der Datei StdDialog.ui abgespeichert und mit pyuic5 zur Datei StdDialog_ui.py konvertiert.Listing 5 zeigt das benötigte Hauptprogramm, das in der Datei StdDialog.py implementiert wird.
Listing 5: Das Hauptprogramm für den einfachen Editor
import sys <br/>from PyQt5.QtWidgets import QMainWindow, QAction, QApplication, QFileDialog <br/>from StdDialog_ui import * <br/><br/>class MyForm(QMainWindow): <br/> # Initialisierung des Hauptfensters <br/> def __init__(self): <br/> super().__init__() <br/> self.ui = Ui_MainWindow() <br/> self.ui.setupUi(self) <br/> # Slots für die Menüpunkte definieren <br/> self.ui.action_Neu.triggered.connect(<br/> self.actionDateiNeu) <br/> self.ui.action_Oeffnen.triggered.connect(<br/> self.actionDateiOeffnen) <br/> self.ui.action_Speichern.triggered.connect(<br/> self.actionDateiSpeichern) <br/> self.ui.action_Beenden.triggered.connect(<br/> self.actionDateiBeenden) <br/> self.show() <br/> <br/> def actionDateiNeu(self): <br/> # Inhalt Plain Text-Control löschen <br/> self.ui.plainTextEdit.setPlainText("") <br/> self.ui.statusbar.showMessage("Text gelöscht!") <br/><br/> def actionDateiOeffnen(self): <br/> # Datei zum Öffnen abfragen <br/> filename = QFileDialog.getOpenFileName(<br/> self, "Datei öffnen", "", <br/> "Alle Dateien (*.*)") <br/> if filename[0]: <br/> file = open(filename[0], "r") <br/> data = file.read() <br/> self.ui.plainTextEdit.setPlainText(data) <br/> file.close() <br/> self.ui.statusbar.showMessage("Datei geladen.") <br/> else: <br/> self.ui.statusbar.showMessage(<br/> "Fehler beim Laden!") <br/> <br/> def actionDateiSpeichern(self): <br/> # Datei zum Speichern abfragen <br/> filename, _ = QFileDialog.getSaveFileName(<br/> self, "Datei speichern", <br/> file = open(filename, "w") <br/> data = self.ui.plainTextEdit.toPlainText() <br/> file.write(data) <br/> file.close() <br/> self.ui.statusbar.showMessage(<br/> "Datei gespeichert.") <br/> else: <br/> self.ui.statusbar.showMessage(<br/> "Fehler beim Speichern!") <br/><br/> def actionDateiBeenden(self): <br/> quit() <br/> <br/>###### main ######################## <br/>if __name__ == "__main__": <br/> # Erzeugung eines Application-Objekts <br/> app = QApplication(sys.argv) <br/> # Erzeugung des Fensters <br/> win = MyForm() <br/> # Darstellung des Fensters <br/> win.show() <br/> <br/> # Ordnungsgemässe Beendigung der Anwendung <br/> sys.exit(app.exec_()) <br/>###### End of main #################
Nach den erforderlichen import-Statements wird die Klasse MyForm implementiert, in diesem Beispiel aber abgeleitet von QMainWindow. In der vom pyuic5-Konverter erzeugten Datei befindet sich dieses Mal die Klasse Ui_MainWindow, die dann hier bei der Initialisierung von MyForm Verwendung findet. Im weiteren Verlauf des Konstruktors werden die Slots für die Menüpunkte definiert. Hier findet die Verbindung des triggered-Signals der Menüpunkte mit den gewünschten Slot-Funktionen in der MyForm-Klasse statt.Die Implementierung dieser Funktionen ist relativ einfach. Für den Neu-Befehl wird einfach der Inhalt des PlainTextEdit-Controls gelöscht, und zum Beenden des Programms dient der Aufruf der quit-Funktion.Der Öffnen-Befehl benutzt aus der Klasse QFileDialog die Funktion getOpenFileName, um die zu öffnende Datei abzufragen. Als Parameter werden der Fenstertitel, das Ausgangsverzeichnis und der Dateifilter (hier: *.*) angegeben. Als Rückgabe bekommt man einen oder mehrere Dateinamen in einem Array. Nun wird der erste Dateiname zum Einlesen der Daten geöffnet und der Text im Text-Control ausgegeben.Der Speichern-Befehl verwendet die Funktion getSaveFileName, um den Namen der Datei abzufragen, in der die Daten gespeichert werden sollen. Die Parameter sind die gleichen wie bei der Funktion getOpenFileName.Die main-Funktion des kleinen Editors wird aus einem anderen Beispiel unverändert übernommen.Nach dem Start des Programms StdDialog.py kann das Menü ausprobiert werden (Bild 7).
Das Menüdes Text-Editors(Bild 7)
Autor
Eigene, anwendungsspezifische Dialoge werden ebenfalls mit dem Qt-Designer erstellt, in einer eigenen ui-Datei gespeichert und mit pyuic5 konvertiert. Der modale Dialog wird dann ganz normal instanziert und mithilfe der exec_-Funktion aufgerufen:
def actionDialog(self):
dlg = .... # Dialog-Klasse
dlg.setWindowModality(
Qt.ApplicationModal)
dlg.exec_() Und jetzt ein wenig Layout
In den bisherigen Beispielprogrammen wurden die Steuerelemente einfach an einer bestimmten Stelle positioniert. Diese Vorgehensweise ist zwar sehr einfach, wenn das Fenster jedoch vergrößert oder verkleinert wird, passt sich die Anordnung der Controls nicht an die neue Fenstergröße an.Qt bietet verschiedene Möglichkeiten an, um Fenster zu erstellen, in denen sich die Positionen der Steuerelemente bei einer Größenänderung anpassen. Zunächst existieren bei allen Controls die Eigenschaften maximumSize und minimumSize, die im Property-Fenster gesetzt werden können. Außerdem gibt es folgende Layout-Steuerelemente:- Horizontal Layout
- Vertical Layout
- Grid Layout
- Form Layout
Das Grundlayoutim Dialogfenster(Bild 8)
Autor
Nun beginnt der eigentliche Layout-Prozess. Man selektiert zuerst mit der Maus (durch einmaliges Anklicken mit gedrückter [Strg]-Taste) das Label und die Textbox und ruft dann das Kontextmenü durch Anklicken mit der rechten Maustaste auf. Dort wird der Befehl Layout und der Unterbefehl Lay Out Horizontally aufgerufen. Die roten Randlinien markieren das Layout-Control im Fenster. Nun werden die beiden RadioButtons selektiert. Mit der rechten Maustaste ist aus dem Kontextmenü der Befehl Layout und der Unterbefehl Lay Out Vertically aufzurufen. Als Nächstes werden die drei Buttons und der VerticalSpacer auf der rechten Seite des Fensters selektiert. Als Layout wird hier Lay Out Vertically eingestellt. Das Gleiche geschieht mit den drei Controls auf der linken Seite: Man selektiert das horizontale Layout-Element mit Label und Textbox, das ListBox-Control und die GroupBox und stellt Lay Out Vertically ein. Im letzten Layout-Schritt klickt man nun mit der rechten Maustaste in das Dialogfenster (es ist kein Steuerelement selektiert) und setzt das Layout auf Lay Out Horizontally. Das fertige Layout wird in Bild 9 gezeigt.
Das fertige Layoutdes Dialogfensters(Bild 9)
Autor
Man kann das entwickelte Layout im Qt-Designer jederzeit testen. Hierzu ruft man einfach den Befehl Preview … im Menü Form auf. Sie können nun das Fenster vergrößern oder verkleinern und die Anordnung der Steuerelemente überprüfen.Nun ist es auch interessant, einmal einen kurzen Blick auf das Fenster Object Inspector am rechten Rand des Qt-Designers zu werfen. Hier kann man den Aufbau der Hierarchie der Steuerelemente im Fenster sehen (Bild 10). Die verwendeten Layout-Controls sind hier ebenfalls entsprechend aufgelistet. Diese Liste eignet sich auch sehr gut, wenn man gezielt einzelne Elemente auswählen möchte, da hier auch eine Mehrfach-Selektion möglich ist.
Der Aufbauder Steuerelemente-Hierarchie im Qt-Designer(Bild 10)
Autor
Weiterer Python-Code wird für dieses Beispielprogramm nicht benötigt. Das fertige Layout lässt sich in der Datei MyLayout.ui abspeichern und mit pyuic5 konvertieren.Die anderen Layout-Steuerelemente werden in analoger Weise benutzt. Beim Designen eines Layouts geht man in der Regel „von innen nach außen“ vor. Man selektiert einzelne Gruppen von Controls und arrangiert sie. Danach ordnet man diese Gruppen zueinander an. Dieser Prozess kann mehrfach wiederholt werden. Und zum Schluss definiert man das Layout für das Fenster.
Nun ein bisschen Bewegung
Als letztes Beispielprogramm soll in diesem Artikel ein hochspannendes Animationsspiel erstellt werden. Im Qt-Designer wird wieder ein neues Projekt vom Typ Dialog without Buttons erzeugt. In der linken und in der rechten oberen Ecke wird jeweils ein PushButton-Control platziert. Der Button in der rechten Ecke wird mit dem Text Start versehen und bekommt den Objektnamen pushButtonStart. Der linke Button bleibt unverändert. Die erforderliche Benutzerschnittstelle ist fertig und wird in der Datei Animation.ui gespeichert und mit pyuic5 in die Datei Animation_ui.py konvertiert.Der Code für das Dialogfenster wird in der Datei Animation.py implementiert und ist in Listing 6 zu sehen. Die Dialogklasse MyForm wird zunächst implementiert und wieder von QDialog abgeleitet. Im Konstruktor werden für die clicked-Signale der beiden Buttons zwei Slots definiert.Listing 6: Ein Super-Animationsspiel
import sys <br/>from PyQt5.QtWidgets import QDialog, QApplication, QMessageBox <br/>from PyQt5.QtCore import QRect, QPropertyAnimation <br/>from Animation_ui import * <br/><br/>class MyForm(QDialog): <br/> # Initialisierung des Dialog-Fensters <br/> def __init__(self): <br/> super().__init__() <br/> self.ui = Ui_Dialog() <br/> self.ui.setupUi(self) <br/> # Im Slot wird die Animation gestartet <br/> self.ui.pushButtonStart.clicked.connect(<br/> self.startAnimation) <br/> # Anzeige einer MessageBox, wenn getroffen <br/> self.ui.pushButton.clicked.connect(self.hitButton) <br/> self.show() <br/> <br/> def startAnimation(self): <br/> # Definition aller Animations-Parameter <br/> self.anim = QPropertyAnimation(<br/> self.ui.pushButton, b"geometry") <br/> self.anim.setDuration(2000) <br/> self.anim.setStartValue(QRect(20, 20, 75, 23)) <br/> self.anim.setEndValue(QRect(200, 200, 100, 50)) <br/> self.anim.setLoopCount(5) <br/> self.anim.start() <br/><br/> def hitButton(self): <br/> QMessageBox.question(self, "Animation", <br/> "Getroffen!!! Sehr gut!!!", <br/> QMessageBox.Ok) <br/> <br/>###### main ######################## <br/>if __name__ == "__main__": <br/> # Erzeugung eines Application-Objekts <br/> app = QApplication(sys.argv) <br/> # Erzeugung des Fensters <br/> win = MyForm() <br/> # Darstellung des Fensters <br/> win.show() <br/> <br/> # Ordnungsgemässe Beendigung der Anwendung <br/> sys.exit(app.exec_()) <br/>###### End of main #################
Im Slot startAnimation wird die Bewegung des linken Buttons definiert. Dazu gehört zunächst einmal das Animations-Objekt selbst. Mit dem QPropertyAnimation-Objekt erfolgt die Angabe, welche Eigenschaft in welchem UI-Objekt zu animieren ist. Hier soll die Geometrie des Buttons manipuliert werden. Unter Geometrie versteht man hier die Position und die Größe des Buttons. Danach wird die Dauer der Bewegung in Millisekunden gesetzt. Schließlich wird die Änderung der Geometrie angegeben. Der Startwert (Funktion: setStartValue) ist in diesem Fall die ursprüngliche Größe und Position des linken PushButton-Objekts. Diese Zeile kann auch weggelassen werden und ist hier nur der Vollständigkeit halber angegeben. Der Endwert (Funktion: setEndValue) gibt die finale Position und Größe des Buttons an. Die angegebene Bewegung soll in diesem Beispiel fünfmal wiederholt werden. Dies wird mit der Funktion setLoopCount(5) angegeben. Nachdem alle Animationsparameter gesetzt sind, kann der Bewegungsablauf schließlich gestartet werden.Als Höhepunkt dieses fantastischen Beispiels wurde ein kleiner Reaktionstest eingebaut (Bild 11). Versuchen Sie, während der Animation den Button anzuklicken, und freuen Sie sich, wenn Sie getroffen haben. Hierzu wurde die zweite Schaltfläche einfach mit dem Slot hitButton verbunden, der nur eine QMessageBox mit einer Erfolgsmeldung ausgibt.
Ein Super-Animationsspielmit Qt5(Bild 11)
Autor
Zusammenfassung
Auch mit Python macht die Erstellung von Benutzerschnittstellen mit Qt5 viel Spaß. Der Qt-Designer kann eingesetzt werden, um die Steuerelemente im Fenster schnell zu platzieren. Die Programmierung gestaltet sich relativ einfach und ist gut zu erlernen. Wer schon Erfahrung mit Qt5 und C++ hat, kann dieses Wissen sehr leicht in die Python-Welt übertragen und anwenden.Zum Schluss möchte ich noch anmerken, dass in diesem Artikel nur ein sehr kleiner Teil von Qt5 vorgestellt wurde. Es gibt noch viele weitere Steuerelemente und auch zusätzliche Features, wie zum Beispiel Klassen für den Datenbank- oder Netzwerkzugriff, sowie allgemeine Klassen für die Stringverarbeitung oder die Benutzung grafischer Grundelemente.Fussnoten
- Bernd Marquardt, Ein bisschen User Interface gefällig?, dotnetpro 9/2019, Seite 56 ff., http://www.dotnetpro.de/A1909QtCPP
- Qt-Designer, http://www.qt.io/download
