en effektiv Python + PyQt Designer arbetsflöde

innan vi börjar, det antas att du har mellanliggande till avancerad kunskap om Python. Detta inkluderar Grundläggande datatyper (särskilt ordböcker), uttalanden och funktioner. Kunskap om objektorienterad programmering (OOP) skulle vara användbar men inte nödvändig.

detta kommer att bli en snabb handledning om hur du gör en Python GUI med en kombination av Python PyQt-biblioteket och designern. Designer är ett program som kommer med PyQt och låter dig skapa GUI visuellt. Vi kommer att använda just Designer och en Python IDE/textredigerare. Python GUI behöver inte vara komplicerat!

Låt oss titta på att skapa ett Python GUI-arbetsflöde med dessa funktioner:

• en konfigurationsfil för anpassade användarinställningar
• flera fönster i programmet
• lägga till funktioner i knappar, inmatningsrutor och andra klickbara objekt
• bilder och logotyper

detta är verkligen allt du behöver för en enkel men robust Python GUI. I denna handledning låt oss bara skapa en enkel valutaomvandlare.

Vi kommer att använda Python 3.6 i denna handledning och jag kommer att skapa denna handledning i en virtuell miljö med Windows 10. I denna handledning behöver vi bara installera PyQt5 för GUI och förfrågningar om vårt provprojekt. Detta kommer att göras med pip. Det är viktigt att notera att Designer inte kommer med PIP PyQt5-installationen och måste installeras separat. Kodblocket nedan visar de kommandon som du behöver skriva:

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.

valuta data

Vi kan få gratis Forex data från exchangerate-API som bekvämt har ett api vi kan använda. API returnerar ett JSON-objekt med valutainformationen som kan navigeras med en Python-ordbok. Växelkurserna är baserade på den huvudvaluta du anger.

i exemplet nedan vill vi titta på Forex med amerikanska Dollar (USD) som en huvudvaluta.

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

skapa GUI

nu kommer den roliga delen. Skapa GUI!

När du öppnar Qt Designer öppnas den här prompten. Jag vill börja med en tom duk så jag väljer ”Dialog utan knappar” och klickar sedan på ”Skapa”.

nu har du ett tomt dialogfönster att arbeta med. Du kan börja lägga till widgets med listan till vänster. Du lägger till dessa widgets genom att dra och släppa dem i ditt GUI-fönster. Medan det finns många widgets, kommer jag i denna handledning bara att täcka följande widgets:

• etiketter
• tryckknapp
• Radredigering
• kombinationsruta

kombinationsrutan är också känd som en rullgardinslista och du kan fylla i den här listan genom att dubbelklicka på Kombinationsruteobjektet i Designer, det ger dig ett fönster där du kan lägga till objekt. I det här fallet lägger vi till de valutor vi använder. Detta låter användaren bestämma vilken valuta de vill använda som referensvaluta.

fyll i widgeten genom att klicka på den gröna tilläggsknappen på nederst till vänster

När du börjar lägga till dessa widgets bör du se till att de heter korrekt så att du enkelt kan hänvisa till dem i Python-koden. Detta görs med objektnamnet i egenskapsredigeraren till höger. Vanligtvis lägger jag bara till deras funktion i det befintliga namnet, till exempel labelTitle eller lineEditLocationDetails. Denna typ av namngivning hjälper mig att komma ihåg vilken typ av GUI-objekt jag arbetar med när jag skriver Python-koden.

stil det hur du vill, men för dem som följer denna handledning skapa ett GUI som ser ut så här nedan:

den flytande ”logo” – texten är en platshållare för en bild som vi laddar. Det kommer att förklaras senare!

Qt Designer till Python

spara UI-filen i din projektmapp som ”mainDialog.ui”, jag gillar att skapa en undermapp som heter ”ui” och sedan spara den där så att vi kan hålla projektmappen organiserad.

när det har sparats måste vi konvertera det till något som Python faktiskt förstår. Navigera till undermappen ui med kommandotolken. Om du också gör detta i en virtuell miljö, se till att du också befinner dig i din virtuella miljö som innehåller PyQt5-installation.

skriv den här koden för att navigera till mappen som innehåller ui-filen och konvertera .ui-fil till en. py-fil:

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

i roten till projektmappen skapar du en Python-fil som heter ”main.py”. ange den här koden:

kör main.py fil med din Python tolk. Grattis! Nu Python kan köra koden och ditt GUI kommer att dyka upp. Jag förklarar de viktiga delarna av koden hittills:

• rad 5: vi importerar mainDialog.py fil inifrån ui-undermappen. Jag använder ett alias” mainDialog ” för att göra namngivningen enklare.
• linje 10: den här klassen innehåller alla funktioner relaterade till ditt mainDialog-fönster som du just skapade. Det första argumentet uppmanar QDialog-objektet som är den typ av GUI vi använder. Det andra argumentet är baserat på aliaset vi förklarade och det är ui_dialog-klassen inuti Python-filen som genererades från .ui – filkonvertering
• Linje 12: funktionen __init__ är viktig eftersom det är koden du vill köra när programmet startar. Så det är här självet.setupUi (själv) kommer in eftersom du vill att användargränssnittet ska köras när du öppnar programmet. Vi kommer att lägga saker som att ladda konfigurationsfiler och knappfunktioner här eftersom vi vill att de ska fungera så snart vi kör programvaran.
• rad 20: Det här är koden som kör och öppnar GUI.

lägga till funktioner till knappar och objekt

nu har vi vår Vackra GUI. Hur får vi det att göra Forex? Låt oss lägga till funktionen för att ladda de senaste valutakurserna som jag visade i början av detta inlägg. Låt oss sedan lägga in koden för att ansluta objekten till Python-koden.

När du försöker ansluta till objekten du skapade i Designer måste du börja med ” jaget.”. Så om ditt objekt i PyQt Designer kallades labelTitle, kommer du att ringa objektet genom att skriva in själv.labelTitle. Om ditt objekt kallades lineEditInputDirectory då du kommer att kalla det genom att skriva själv.lineEditInputDirectory och så vidare.

kolla in Github-kärnan och förklaringen nedan:

linje 16: Den här funktionen anropas när användaren klickar på knappen för att ladda valutakurser. Själva objektet är själv.tryckknappbelastar men vi bifogar funktionalitet när användaren klickar på den genom att lägga till .klickad.ansluta(). Denna funktion har vissa specifika nyanser. Argumentet för .connect () accepterar endast funktionen utan parentes, så i detta fall, själv.load_rates. Om du behöver lägga till argument på grund av kraven i Python-funktionen måste du använda en lambda, se kodblocket nedan:

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

rad 19: .currentText () får den aktuella strängen i comboBox-objektet som kommer att vara vår referensvaluta. Så om användaren väljer USD kommer den att returnera valutakurser i förhållande till 1 USD. Denna sträng läggs till webbadressen som används för att ansluta till API i nästa rad.

rader 24-26: dessa används för att ladda våra data på lineEdit-objekt. Vi använder .setText () för att ändra texten på LINEEDIT-objekten. Det accepterar bara strängar, så siffrorna från API bör konverteras till sträng.

lägga till en konfigurationsfil

den här delen är lite knepig och är där din befintliga Python-kunskap kommer att vara användbar. I det här avsnittet kommer vi att täcka följande funktioner:

• öppna ett nytt fönster i programmet
• skapa och använda en konfigurationsfil

nu när vi har ett arbetsprogram, låt oss säga att för ett exempel har olika personer i din avdelning olika behov och de arbetar alla med skillnadsvalutor. Vi kan göra deras liv enklare genom att lägga till en konfigurationsfil så att de inte behöver använda rullgardinsmenyn varje gång. Med hjälp av en konfigurationsfil kan vi spara sina unika inställningar och sedan ladda den när programmet startar.

det är här” Config ” – knappen kommer in. Låt oss skapa ett nytt fönster för användaren att ändra sina inställningar. Genom att göra detta kan vi hålla huvudfönstret rent och organiserat.

spara detta i din UI-mapp som configdialog.ui och som vi gjorde tidigare i denna handledning, konvertera den med samma pyuic5-kommando som ses i kodblocket nedan:

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

nu här är vad den uppdaterade koden ska se ut nedan. Förklaringarna till de nya kodtilläggen ligger under denna Github gist:

• linje 6: Vi lägger till inställningsdialogfönstret genom denna importdeklaration
• linje 10-11: nya importdeklarationer som är relevanta för att ha ett trevligt konfigurationsfilarbetsflöde. pickle och os kommer båda med din standard Python-miljö och behöver inte ytterligare installationer.
• linje 13-14: Placeringen av konfigurationsfilen används hela skriptet i alla klasser så vi förklarar det som en global och göra det ALL-caps eftersom det är en konstant.
• rad 17: den här klassen innehåller all relevant information för konfigurationsfönstret. Om du vill ringa objekt i config UI-filen du gjorde rekommenderas att samtalet görs i den här klassen, inte MainDialog-klassen.
• rad 23: vi laddar den befintliga konfigurationsfilen. Vi gör detta så att vi kan visa vad som är den aktuella inställningen för användaren.
• rad 26: Med hjälp av den laddade konfigurationsfilen ställer vi in kombinationsrutetexten till vad den aktuella inställningen är.
• rad 33: När vi sparar konfigurationen vill vi uppdatera ordlistan lagrad i själv.config innan du skriver konfigurationsfilen.
• linje 39: detta stänger inställningsparameterfönstret.
• linje 48-54: detta är logiken när du laddar konfigurationsfilen i huvuddialogfönstret. Av någon anledning kan konfigurationsfilen saknas och då startar inte programmet på grund av fel. Om konfigurationsfilen saknas, skapa en konfigurationsfil med standardparametrar så att användaren fortfarande kan starta programmet och sedan ändra parametrarna senare.
• linje 56: vi laddar de anpassade inställningarna och ställer in kombinationsrutan till användarens föredragna valuta.
• linje 62-63: detta startar inställningsparameterfönstret. Detta är baserat på namnet på config dialog klassnamn. I det här fallet heter klassen ConfigParameters.
• linje 65-68: när användaren är klar med att konfigurera sina inställningar och fönstret är stängt. Programmet uppdaterar sig själv och laddar konfigurationsfilen igen innan du uppdaterar kombinationsrutan referensvaluta.

detta arbetsflöde tillåter användaren att spara sina unika inställningar och programmet fungerar fortfarande om konfigurationsfilen saknas. Du vill försöka redogöra för alla problem som ditt program kommer att stöta på.

lägga till bilder

nu har du ett fullt fungerande program, låt oss lägga till sista handen: en logotyp. Medan det kan finnas en PyQt-resursfil där du kan lagra bilder, föredrar jag att bara ladda bilder med etiketter och pixmaps. Det här är väldigt snabbt.

linje 56-58: vi laddar logotypen som jag sparade i ui-mappen. Sedan ställer jag in labellogo-objektet för att ladda pixmapen och ställa in innehållet för att skala till storleken på labelLogo-objektet.

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. Jag tillbringade otaliga timmar googling dessa saker och även betalda tutorials på Udemy var lite värdelös.