het bouwen van een Python GUI met PyQt Designer

een effectieve Python + PyQt Designer workflow

voordat we beginnen, wordt aangenomen dat je intermediaire tot geavanceerde kennis van Python hebt. Dit omvat basisgegevenstypen( vooral woordenboeken), statements en functies. Kennis over Object-Oriented-Programming (OOP) zou nuttig zijn, maar niet vereist.

Dit is een korte handleiding over het maken van een Python GUI met behulp van een combinatie van de Python PyQt bibliotheek en Designer. Designer is een programma dat wordt geleverd met PyQt en kunt u de GUI visueel te maken. We zullen alleen Designer en een Python IDE/teksteditor gebruiken. Python GUI hoeft niet ingewikkeld te zijn!

laten we eens kijken naar het maken van een Python GUI workflow met deze functies:

  • een configuratiebestand voor aangepaste gebruikersinstellingen
  • meerdere vensters binnen het programma
  • functies toevoegen aan knoppen, invoervakken en andere aanklikbare items
  • afbeeldingen en logo ‘ s

Dit is echt alles wat je nodig hebt voor een eenvoudige maar robuuste Python GUI. In deze tutorial laten we gewoon een eenvoudige valuta-omzetter maken.

We zullen Python 3 gebruiken.6 in deze tutorial en Ik zal het maken van deze tutorial in een virtuele omgeving met behulp van Windows 10. In deze tutorial hoeven we alleen PyQt5 te installeren voor de GUI en verzoeken voor ons voorbeeldproject. Dit wordt gedaan met behulp van pip. Het is belangrijk op te merken dat Designer niet wordt geleverd met de PIP PyQt5 installatie en moet apart worden geïnstalleerd. Het codeblok hieronder toont de commando ‘ s die u moet typen:

pip install PyQt5
pip install PyQt5Designer
pip install requests

Output of the pip install process for PyQt5

Once it is installed, just search for “Designer” in your computer and it should pop up.

zoeken naar “Designer” en het moet pop up

currency data

We kunnen gratis Forex data krijgen van ExchangeRate-API die handig een API heeft die we kunnen gebruiken. De API retourneert een JSON object met de valuta informatie die kan worden genavigeerd met behulp van een Python woordenboek. De wisselkoersen zijn gebaseerd op de mastervaluta die u opgeeft.

in het voorbeeld hieronder willen we kijken naar Forex met behulp van de Amerikaanse Dollar (USD) als een mastervaluta.

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.
}
}

het maken van de GUI

komt nu het leuke deel. Het creëren van de GUI!

wanneer u Qt Designer opent, wordt deze prompt geopend. Ik wil beginnen met een leeg canvas dus Ik zal kiezen “Dialog without Buttons” en klik vervolgens op “Create”.

een leeg dialoogvenster om mee te werken. U kunt beginnen met het toevoegen van widgets met behulp van de lijst aan de linkerkant. U voegt deze widgets toe door ze te slepen en neer te zetten op uw GUI-venster. Hoewel er veel widgets zijn, zal ik in deze tutorial alleen de volgende widgets behandelen:

  • Labels
  • drukknop
  • Regel bewerken
  • keuzelijst

de keuzelijst staat ook bekend als een keuzelijst en u kunt deze lijst vullen door te dubbelklikken op het keuzelijst object in Designer, het geeft u een venster waar u items kunt toevoegen. In dit geval voegen we de valuta ‘ s toe die we gebruiken. Dit laat de gebruiker beslissen welke valuta hij als referentievaluta wil gebruiken.

vul het widget in door op de groene knop optellen linksonder te klikken

wanneer u begint met het toevoegen van deze widgets moet u ervoor zorgen dat ze een juiste naam hebben, zodat u ze gemakkelijk kunt verwijzen in de Python-code. Dit wordt gedaan met behulp van de objectnaam in de Property Editor aan de rechterkant. Meestal voeg ik gewoon hun functie toe aan de bestaande naam, zoals labelTitle of lineEditLocationDetails. Deze stijl van naamgeving helpt me te herinneren met welk type GUI-object ik werk wanneer ik de Python-code typ.

objectName (rood gemarkeerd) zal de naam van de variabele zijn wanneer we met de python code

stijl het zoals u wilt, maar voor degenen die deze tutorial volgen maak een GUI die er hieronder zo uitziet:

mijn mooie GUI

die zwevende “logo” tekst is een plaatshouder voor een afbeelding die we zullen laden. Dat zal later worden uitgelegd!

Qt Designer naar Python

sla het UI-bestand op in uw projectmap als ” mainDialog.ui”, ik maak graag een submap genaamd “ui” en sla het daar op, zodat we de projectmap georganiseerd kunnen houden.

zodra het is opgeslagen, moeten we het converteren naar iets dat Python echt begrijpt. Navigeer met de opdrachtprompt naar de submap ui. Als je dit ook doet in een virtuele omgeving, zorg er dan voor dat je je ook in je virtuele omgeving bevindt die PyQt5 installatie bevat.

Typ deze code om naar de map met het ui-bestand te navigeren en het te converteren .ui-bestand naar een .py-bestand:

cd "your/ui/folder/here"
pyuic5 mainDialog.ui -o mainDialog.py

maak in de root van de projectmap een Python-bestand aan met de naam “main.py”. Voer deze code in:

Voer de main.py bestand met je Python interpreter. Gefeliciteerd! Nu Python kan de code draaien en je GUI zal verschijnen. Ik zal de belangrijke delen van de code tot nu toe uitleggen:

  • regel 5: we importeren de mainDialog.py bestand vanuit de ui submap. Ik gebruik een alias “mainDialog” om de naamgeving makkelijker te maken.
  • regel 10: Deze klasse bevat alle functies gerelateerd aan uw mainDialog venster die u zojuist gemaakt hebt. Het eerste argument roept het QDialog object aan dat het type GUI is dat we gebruiken. Het tweede argument is gebaseerd op de alias die we gedeclareerd hebben en het is de Ui_Dialog klasse in het Python bestand dat is gegenereerd vanuit de .ui file conversie
  • regel 12: de _ _ init _ _ functie is belangrijk omdat het de code is die u wilt uitvoeren wanneer het programma opstart. Dus dit is waar het zelf is.setupUi (self) komt omdat u wilt dat de UI te draaien wanneer u het programma opent. We zullen dingen zoals het laden van configuratiebestanden en knop functionaliteit hier omdat we willen dat ze werken zodra we de software draaien.
  • regel 20: Dit is de code die de GUI uitvoert en opent.

functies toevoegen aan de knoppen en objecten

nu hebben we onze mooie GUI. Hoe maken we het doen Forex? Laten we de functie toevoegen aan de nieuwste Forex tarieven die ik in het begin van dit bericht liet zien te laden. Dan, laten we in de code om de objecten te verbinden met de Python-code.

wanneer u probeert verbinding te maken met de objecten die u hebt gemaakt in Designer, moet u beginnen met het “zelf”.”. Dus als je object in PyQt Designer labelTitle heette, zal je het object bellen door in self te typen.labelTitle. Als je object lineEditInputDirectory werd genoemd dan zal je het noemen door self te typen.lineEditInputDirectory en ga zo maar door.

bekijk de Github gist en de uitleg hieronder:

regel 16: Deze functie wordt aangeroepen wanneer de gebruiker op de knop klikt om Forex rates te laden. Het object zelf is zelf.drukknop loadrates maar we voegen functionaliteit toe wanneer de gebruiker erop klikt door toe te voegen .klik.verbinding(). Deze functie heeft een aantal specifieke nuances. Het argument voor .connect() accepteert alleen de functie zonder de haakjes, dus in dit geval zelf.load_rates. Als u argumenten moet toevoegen vanwege de vereisten van de Python-functie die u nodig hebt om een lambda te gebruiken, refereer dan naar het codeblok hieronder:

self.pushButton.clicked.connect(lambda:self.load_rates(arg1,arg2,...))

regel 19: .currentText () krijgt de huidige string van het ComboBox object dat onze referentievaluta zal zijn. Dus als de gebruiker USD selecteert zal het Forex tarieven ten opzichte van 1 USD retourneren. Deze string wordt toegevoegd aan de URL die wordt gebruikt om verbinding te maken met de API in de volgende regel.

regels 24-26: deze worden gebruikt om onze gegevens op lineEdit-objecten te laden. We gebruiken .setText () om de tekst op de lineEdit objecten te wijzigen. Het accepteert alleen strings, dus de nummers van de API moeten worden geconverteerd naar string.

Laatste forexcijfers vergeleken met 1 Filipijnse Peso

een configuratiebestand toevoegen

dit deel is een beetje lastig en is waar uw bestaande Python kennis nuttig zal zijn. In deze sectie zullen we de volgende functies behandelen:

  • het openen van een nieuw venster binnen het programma
  • het maken en gebruiken van een configuratiebestand

nu we een werkprogramma hebben, laten we zeggen dat, omwille van een voorbeeld, verschillende mensen in uw afdeling verschillende behoeften hebben en ze werken allemaal met verschillende valuta ‘ s. We kunnen hun leven gemakkelijker maken door een configuratiebestand toe te voegen, zodat ze niet elke keer de drop down box hoeven te gebruiken. Met behulp van een configuratiebestand kunnen we hun unieke instellingen opslaan en het vervolgens laden wanneer het programma opstart.

Dit is waar de “Config” knop komt. Laten we een nieuw venster voor de gebruiker om hun instellingen te wijzigen. Door dit te doen stelt ons in staat om het hoofdvenster schoon en georganiseerd te houden.

opslaan in uw ui-map als configurdialog.ui en zoals we eerder in deze tutorial deden, converteer het met hetzelfde pyuic5 commando zoals te zien is in het codeblok hieronder:

cd "your/ui/folder/here"
pyuic5 configDialog.ui -o configDialog.py

Hier ziet de bijgewerkte code er hieronder uit. De uitleg voor de nieuwe code toevoegingen zijn onder deze Github gist:

  • regel 6: we voegen het configuratiedialoogvenster toe via dit import statement
  • regel 10-11: nieuwe import statements die relevant zijn voor het hebben van een mooie config file workflow. pickle en os beide komen met uw standaard Python omgeving en hebben geen extra installaties nodig.
  • regel 13-14: De locatie van het configuratiebestand wordt door het hele script in alle klassen gebruikt, dus we verklaren het als een globaal en maken het all-caps omdat het een constante is.
  • regel 17: deze klasse bevat alle relevante informatie voor het configuratievenster. Als u objecten wilt aanroepen in het config UI-bestand dat u hebt gemaakt, wordt het aanbevolen dat de oproep in deze klasse wordt gedaan, niet in de MainDialog-klasse.
  • regel 23: we laden het bestaande configuratiebestand. We doen dit zodat we de gebruiker kunnen laten zien wat de huidige instelling is.
  • regel 26: Met behulp van het geladen configuratiebestand, stellen we de tekst van de keuzelijst met invoervak in op de huidige instelling.
  • regel 33: wanneer we de configuratie opslaan, willen we het woordenboek dat is opgeslagen in self bijwerken.config voor het schrijven van het config bestand.
  • regel 39: hiermee wordt het configuratieparametervenster gesloten.
  • regel 48-54: Dit is de logica bij het laden van het configuratiebestand in het hoofdvenster. Om welke reden dan ook, het configuratiebestand kan ontbreken en dan zal het programma niet starten als gevolg van fouten. Als het configuratiebestand ontbreekt, maak dan een configuratiebestand met standaardparameters, zodat de gebruiker het programma nog steeds kan starten en de parameters later kan wijzigen.
  • regel 56: we laden de aangepaste instellingen en stellen de keuzelijst in op de gewenste valuta van de gebruiker.
  • regel 62-63: dit opent het configuratieparametervenster. Dit is gebaseerd op de naam van het configuratiedialoogvenster class name. In dit geval wordt de klasse ConfigParameters genoemd.
  • regel 65-68: nadat de gebruiker klaar is met het instellen van zijn instellingen en het venster gesloten is. Het programma zal zichzelf updaten en het configuratiebestand opnieuw laden voordat het referentievaluta combo box wordt bijgewerkt.

deze workflow staat de gebruiker toe om zijn unieke instellingen op te slaan en het programma zal nog steeds werken als het configuratiebestand ontbreekt. U wilt proberen en rekening houden met elk probleem dat uw programma zal tegenkomen.

afbeeldingen toevoegen

nu hebt u een volledig functioneel programma, Laten we de laatste hand leggen: een logo. Hoewel er een PyQt resource-bestand kan zijn waar je afbeeldingen kunt opslaan, geef ik de voorkeur aan het laden van afbeeldingen met behulp van labels en pixmaps. Dit is heel snel.

regel 56-58: we laden het logo dat ik opgeslagen heb in de ui-map. Vervolgens stel ik het labelLogo-object in om de pixmap te laden en stel ik de inhoud in om te schalen naar de grootte van het labelLogo-object.

Our final product

Final project folder structure

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. Ik bracht talloze uren googlen deze dingen en zelfs betaalde tutorials op Udemy waren een beetje nutteloos.

admin

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.