Ein effektiver Python + PyQt Designer-Workflow
Bevor wir beginnen, wird davon ausgegangen, dass Sie über mittlere bis fortgeschrittene Kenntnisse in Python verfügen. Dazu gehören grundlegende Datentypen (insbesondere Wörterbücher), Anweisungen und Funktionen. Kenntnisse über objektorientierte Programmierung (OOP) wären nützlich, aber nicht erforderlich.
Dies ist eine kurze Anleitung zum Erstellen einer Python-GUI mit einer Kombination aus der Python PyQt-Bibliothek und dem Designer. Designer ist ein Programm, das mit PyQt geliefert wird und es Ihnen ermöglicht, die GUI visuell zu erstellen. Wir werden nur Designer und einen Python-IDE / Texteditor verwenden. Python GUI muss nicht kompliziert sein!
Betrachten wir die Erstellung eines Python-GUI-Workflows mit folgenden Funktionen:
- Eine Konfigurationsdatei für benutzerdefinierte Benutzereinstellungen
- Mehrere Fenster innerhalb des Programms
- Hinzufügen von Funktionen zu Schaltflächen, Eingabefeldern und anderen anklickbaren Elementen
- Bilder und Logos
Dies ist wirklich alles, was Sie für eine einfache, aber robuste Python-GUI benötigen. In diesem Tutorial erstellen wir einfach einen einfachen Währungsrechner.
Wir werden Python 3 verwenden.6 in diesem Tutorial und ich werde dieses Tutorial in einer virtuellen Umgebung mit Windows 10 erstellen. In diesem Tutorial müssen wir nur PyQt5 für die GUI und Anforderungen für unser Beispielprojekt installieren. Dies geschieht mit pip. Es ist wichtig zu beachten, dass Designer nicht mit der pip PyQt5-Installation geliefert wird und separat installiert werden muss. Der folgende Codeblock zeigt die Befehle, die Sie eingeben müssen:
pip install PyQt5
pip install PyQt5Designer
pip install requests
Once it is installed, just search for „Designer” in your computer and it should pop up.
Währungsdaten
Wir können kostenlose Forex-Daten von der ExchangeRate-API erhalten, die bequem eine API hat, die wir verwenden können. Die API gibt ein JSON-Objekt mit den Währungsinformationen zurück, die mit einem Python-Wörterbuch navigiert werden können. Die Wechselkurse basieren auf der von Ihnen angegebenen Hauptwährung.
Im folgenden Beispiel möchten wir Forex mit dem US-Dollar (USD) als Hauptwährung betrachten.
import requestsurl = 'https://api.exchangerate-api.com/v4/latest/USD'
response = requests.get(url)
data = response.json()# The data variable will look like the dictionary below
{
"base": "USD",
"date": "2020-14-20",
"time_last_updated": 1553092232,
"rates": {
"USD": 1,
"AUD": 1.4882,
"CAD": 1.325097,
"...": 1.311357,
"...": 7.4731, etc. etc.
}
}
Erstellen der GUI
Jetzt kommt der lustige Teil. Erstellen der GUI!
Wenn Sie Qt Designer öffnen, wird diese Eingabeaufforderung geöffnet. Ich möchte mit einer leeren Leinwand beginnen, also wähle ich „Dialog ohne Schaltflächen“ und klicke dann auf „Erstellen“.
Jetzt haben Sie ein leeres Dialogfenster mit. Sie können Widgets über die Liste auf der linken Seite hinzufügen. Sie fügen diese Widgets hinzu, indem Sie sie per Drag & Drop in Ihr GUI-Fenster ziehen. Obwohl es viele Widgets gibt, werde ich in diesem Tutorial nur die folgenden Widgets behandeln:
- Labels
- Push Button
- Line Edit
- Combo Box
Das Kombinationsfeld wird auch als Dropdown-Liste bezeichnet und Sie können diese Liste füllen, indem Sie auf das Kombinationsfeldobjekt im Designer doppelklicken. In diesem Fall fügen wir die von uns verwendeten Währungen hinzu. Auf diese Weise kann der Benutzer entscheiden, welche Währung er als Referenzwährung verwenden möchte.
Wenn Sie mit dem Hinzufügen dieser Widgets beginnen, sollten Sie sicherstellen, dass sie ordnungsgemäß benannt sind, damit Sie im Python-Code problemlos darauf verweisen können. Dies geschieht über den Objektnamen im Eigenschaftseditor auf der rechten Seite. Normalerweise hänge ich ihre Funktion einfach an den vorhandenen Namen an, z. B. labelTitle oder lineEditLocationDetails. Diese Art der Benennung hilft mir, mich daran zu erinnern, mit welcher Art von GUI-Objekt ich arbeite, wenn ich den Python-Code eingebe.
Stylen Sie es wie Sie wollen, aber für diejenigen, die diesem Tutorial folgen, erstellen Sie eine GUI, die wie folgt aussieht:
Dieser schwebende „Logo“ -Text ist ein Platzhalter für ein Bild, das wir laden werden. Das wird später erklärt!
Qt Designer zu Python
Speichern Sie die UI-Datei in Ihrem Projektordner als „mainDialog.ui“, ich möchte einen Unterordner namens „ui“ erstellen und ihn dort speichern, damit wir den Projektordner organisiert halten können.
Sobald es gespeichert ist, müssen wir es in etwas konvertieren, das Python tatsächlich versteht. Navigieren Sie über die Eingabeaufforderung zum Unterordner ui. Wenn Sie dies auch in einer virtuellen Umgebung tun, stellen Sie sicher, dass Sie sich auch in Ihrer virtuellen Umgebung befinden, die die PyQt5-Installation enthält.
Geben Sie diesen Code ein, um zu dem Ordner zu navigieren, der die UI-Datei enthält, und konvertieren Sie die .ui-Datei in eine .py-Datei:
cd "your/ui/folder/here"
pyuic5 mainDialog.ui -o mainDialog.py
Erstellen Sie im Stammverzeichnis des Projektordners eine Python-Datei mit dem Namen „main.py „. Geben Sie diesen Code ein:
Führen Sie die main.py datei mit Ihrem Python-Interpreter. Herzlichen Glückwunsch! Jetzt kann Python den Code ausführen und Ihre GUI wird angezeigt. Ich werde die wichtigen Teile des Codes bisher erklären:
- Zeile 5: Wir importieren die mainDialog.py datei aus dem UI-Unterordner. Ich benutze einen Alias „mainDialog“, um die Benennung zu erleichtern.
- Zeile 10: Diese Klasse enthält alle Funktionen, die sich auf Ihr gerade erstelltes mainDialog-Fenster beziehen. Das erste Argument ruft das QDialog-Objekt auf, das der Typ der von uns verwendeten GUI ist. Das zweite Argument basiert auf dem Alias, den wir deklariert haben, und es ist die Ui_Dialog-Klasse in der Python-Datei, die aus der generiert wurde .ui-Dateikonvertierung
- Zeile 12: Die Funktion __init__ ist wichtig, da es sich um den Code handelt, den Sie beim Start des Programms ausführen möchten. Dies ist also, wo das Selbst.setupUi (self) kommt herein, weil die Benutzeroberfläche beim Öffnen des Programms ausgeführt werden soll. Wir werden hier Dinge wie das Laden von Konfigurationsdateien und Schaltflächenfunktionen einfügen, weil wir möchten, dass sie funktionieren, sobald wir die Software ausführen.
- Zeile 20: Dies ist der Code, der die GUI ausführt und öffnet.
Hinzufügen von Funktionen zu den Schaltflächen und Objekten
Jetzt haben wir unsere schöne GUI. Wie machen wir es Forex? Fügen wir die Funktion hinzu, um die neuesten Forex-Kurse zu laden, die ich am Anfang dieses Beitrags gezeigt habe. Dann fügen wir den Code ein, um die Objekte mit dem Python-Code zu verbinden.
Wenn Sie versuchen, eine Verbindung zu den Objekten herzustellen, die Sie in Designer erstellt haben, müssen Sie mit dem „self.”. Wenn Ihr Objekt in PyQt Designer labelTitle hieß, rufen Sie das Objekt auf, indem Sie self eingeben.labelTitle. Wenn Ihr Objekt lineEditInputDirectory aufgerufen wurde, rufen Sie es auf, indem Sie self eingeben.lineEditInputDirectory und so weiter.
Schauen Sie sich den Github-Kern und die folgende Erklärung an:
Zeile 16: Diese Funktion wird aufgerufen, wenn der Benutzer auf die Schaltfläche klickt, um Forex-Kurse zu laden. Das Objekt selbst ist selbst.pushButtonLoadRates aber wir fügen Funktionalität hinzu, wenn der Benutzer darauf klickt, indem er hinzufügt .angeklickt.verbinden(). Diese Funktion hat einige spezifische Nuancen. Das Argument für .connect() akzeptiert nur die Funktion ohne die Klammer, also in diesem Fall self .load_rates. Wenn Sie aufgrund der Anforderungen der Python-Funktion Argumente hinzufügen müssen, müssen Sie ein Lambda verwenden, lesen Sie den folgenden Codeblock:
self.pushButton.clicked.connect(lambda:self.load_rates(arg1,arg2,...))
Zeile 19: .currentText() ruft die aktuelle Zeichenfolge des comboBox-Objekts ab, die unsere Referenzwährung sein wird. Wenn der Benutzer also USD auswählt, werden Forex-Kurse relativ zu 1 USD zurückgegeben. Diese Zeichenfolge wird der URL hinzugefügt, mit der in der nächsten Zeile eine Verbindung zur API hergestellt wird.
Zeilen 24-26: Diese werden verwendet, um unsere Daten auf LineEdit-Objekte zu laden. Wir verwenden .setText(), um den Text in den LineEdit-Objekten zu ändern. Es werden nur Zeichenfolgen akzeptiert, daher sollten die Zahlen aus der API in Zeichenfolgen konvertiert werden.
Hinzufügen einer Konfigurationsdatei
Dieser Teil ist etwas knifflig und hier sind Ihre vorhandenen Python-Kenntnisse nützlich. In diesem Abschnitt werden die folgenden Funktionen behandelt:
- Öffnen eines neuen Fensters innerhalb des Programms
- Erstellen und Verwenden einer Konfigurationsdatei
Nun, da wir ein funktionierendes Programm haben, nehmen wir an, dass zum Beispiel verschiedene Personen in Ihrer Abteilung unterschiedliche Bedürfnisse haben und alle mit unterschiedlichen Währungen arbeiten. Wir können ihnen das Leben erleichtern, indem wir eine Konfigurationsdatei hinzufügen, damit sie das Dropdown-Feld nicht jedes Mal verwenden müssen. Mit einer Konfigurationsdatei können wir ihre eindeutigen Einstellungen speichern und beim Start des Programms laden.
Hier kommt die Schaltfläche „Config“ ins Spiel. Lassen Sie uns ein neues Fenster erstellen, in dem der Benutzer seine Einstellungen ändern kann. Auf diese Weise können wir das Hauptfenster sauber und organisiert halten.
Speichern Sie dies in Ihrem UI-Ordner als configDialog.ui und wie bereits in diesem Tutorial, konvertieren Sie es mit demselben pyuic5-Befehl wie im folgenden Codeblock:
cd "your/ui/folder/here"
pyuic5 configDialog.ui -o configDialog.py
So sollte der aktualisierte Code unten aussehen. Die Erklärungen für die neuen Code-Ergänzungen finden Sie unter diesem Github-Kern:
- Zeile 6: Wir fügen das Konfigurationsdialogfenster über diese Importanweisung hinzu
- Zeile 10-11: Neue Importanweisungen, die für einen schönen Workflow für Konfigurationsdateien relevant sind. pickle und os werden beide mit Ihrer Standard-Python-Umgebung geliefert und benötigen keine zusätzlichen Installationen.
- Zeile 13-14: Der Speicherort der Konfigurationsdatei wird im gesamten Skript in allen Klassen verwendet, daher deklarieren wir sie als global und machen sie zu Großbuchstaben, da es sich um eine Konstante handelt.
- Zeile 17: Diese Klasse enthält alle relevanten Informationen für das Konfigurationsfenster. Wenn Sie Objekte in der von Ihnen erstellten config-UI-Datei aufrufen möchten, wird empfohlen, dass der Aufruf in dieser Klasse und nicht in der MainDialog-Klasse erfolgt.
- Zeile 23: Wir laden die vorhandene Konfigurationsdatei. Wir tun dies, damit wir dem Benutzer die aktuelle Einstellung anzeigen können.
- Linie 26: Mit der geladenen Konfigurationsdatei setzen wir den Text des Kombinationsfelds auf die aktuelle Einstellung.
- Zeile 33: Wenn wir die Konfiguration speichern, möchten wir das in self gespeicherte Wörterbuch aktualisieren.config vor dem Schreiben der Konfigurationsdatei.
- Zeile 39: Dies schließt das Fenster mit den Konfigurationsparametern.
- Zeile 48-54: Dies ist die Logik beim Laden der Konfigurationsdatei im Hauptdialogfenster. Aus irgendeinem Grund kann die Konfigurationsdatei fehlen und das Programm wird aufgrund von Fehlern nicht gestartet. Wenn die Konfigurationsdatei fehlt, erstellen Sie eine Konfigurationsdatei mit Standardparametern, damit der Benutzer das Programm weiterhin starten und die Parameter später ändern kann.
- Zeile 56: Wir laden die benutzerdefinierten Einstellungen und setzen das Kombinationsfeld auf die bevorzugte Währung des Benutzers.
- Zeile 62-63: Dies öffnet das Fenster Konfigurationsparameter. Dies basiert auf dem Namen des Konfigurationsdialogs Klassenname. In diesem Fall heißt die Klasse ConfigParameters.
- Zeile 65-68: Nachdem der Benutzer seine Einstellungen konfiguriert und das Fenster geschlossen hat. Das Programm aktualisiert sich selbst und lädt die Konfigurationsdatei erneut, bevor das Kombinationsfeld Referenzwährung aktualisiert wird.
Dieser Workflow ermöglicht es dem Benutzer, seine eindeutigen Einstellungen zu speichern, und das Programm funktioniert weiterhin, wenn die Konfigurationsdatei fehlt. Sie möchten versuchen, jedes Problem zu berücksichtigen, auf das Ihr Programm stoßen wird.
Hinzufügen von Bildern
Jetzt haben Sie ein voll funktionsfähiges Programm, lassen Sie uns den letzten Schliff hinzufügen: ein Logo. Während es eine PyQt-Ressourcendatei geben kann, in der Sie Bilder speichern können, lade ich Bilder lieber nur mit Beschriftungen und Pixmaps. Das geht sehr schnell.
Zeile 56-58: Wir laden das Logo, das ich im ui-Ordner gespeichert habe. Dann setze ich das labelLogo-Objekt so, dass die Pixmap geladen wird, und setze den Inhalt so, dass er auf die Größe des labelLogo-Objekts skaliert wird.
Final Thoughts
Hopefully this tutorial gives some clarity on how PyQt5 Designer works. Ich habe unzählige Stunden damit verbracht, diese Dinge zu googeln, und selbst bezahlte Tutorials auf Udemy waren ein bisschen nutzlos.