en effektiv Python + Pykt Designer arbejdsgang

før vi begynder, antages det, at du har mellemliggende til avanceret viden om Python. Dette omfatter grundlæggende datatyper (især ordbøger), udsagn og funktioner. Viden om objektorienteret programmering (OOP) ville være nyttigt, men ikke påkrævet.

dette vil være en hurtig tutorial om at lave en Python GUI ved hjælp af en kombination af Python Pyt bibliotek og Designer. Designer er et program, der kommer med Pyt og giver dig mulighed for at oprette GUI visuelt. Vi vil bruge bare Designer og en Python IDE / teksteditor. Python GUI behøver ikke at være kompliceret!

lad os se på at oprette en Python GUI-arbejdsgang med disse funktioner:

• en konfigurationsfil til brugerdefinerede brugerindstillinger
• flere vinduer i programmet
• tilføjelse af funktioner til knapper, inputbokse og andre klikbare elementer
• billeder og logoer

Dette er virkelig alt hvad du behøver for en enkel, men robust Python GUI. I denne tutorial lad os bare oprette en simpel valutaomregner.

Vi vil bruge Python 3.6 i denne tutorial, og jeg vil skabe denne tutorial i et virtuelt miljø ved hjælp af vinduer 10. I denne vejledning behøver vi kun at installere Pykt5 til GUI og anmodninger om vores prøveprojekt. Dette gøres ved hjælp af pip. Det er vigtigt at bemærke, at Designer ikke kommer med PIP Pykt5 installation og skal installeres separat. Kodeblokken nedenfor viser de kommandoer, du skal skrive:

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.

valutadata

Vi kan få gratis valutadata fra valutakurs-API, som bekvemt har en API, vi kan bruge. API ‘ en returnerer et JSON-objekt med valutaoplysningerne, som kan navigeres ved hjælp af en Python-ordbog. Valutakurserne er baseret på den hovedvaluta, du angiver.

i eksemplet nedenfor vil vi se på valuta ved hjælp af den amerikanske Dollar (USD) som en hovedvaluta.

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

oprettelse af GUI

nu kommer den sjove del. Oprettelse af GUI!

Når du åbner denne prompt åbnes. Jeg vil starte med et tomt lærred, så jeg vælger “Dialog uden knapper” og derefter klikker på “Opret”.

nu har du et tomt dialogvindue at arbejde med. Du kan begynde at tilføje kontroller ved hjælp af listen til venstre. Du tilføjer disse kontroller ved at trække og slippe dem på dit GUI-vindue. Mens der er mange kontroller, vil jeg i denne tutorial kun dække følgende kontroller:

• etiketter
• trykknap
• Linjeredigering
• kombinationsboks

kombinationsboksen er også kendt som en rulleliste, og du kan udfylde denne liste ved at dobbeltklikke på Kombinationsboksobjektet i Designer, det giver dig et vindue, hvor du kan tilføje emner. I dette tilfælde tilføjer vi de valutaer, vi bruger. Dette giver brugeren mulighed for at bestemme, hvilken valuta de vil bruge som referencevaluta.

når du begynder at tilføje disse kontroller, skal du sørge for, at de er navngivet korrekt, så du nemt kan henvise til dem i Python-koden. Dette gøres ved hjælp af objektnavnet i egenskabseditoren til højre. Normalt tilføjer jeg bare deres funktion til det eksisterende navn, såsom labelTitle eller lineEditLocationDetails. Denne navngivningsstil hjælper mig med at huske, hvilken type GUI-objekt jeg arbejder med, når jeg skriver Python-koden.

stil det, hvordan du vil, men for dem, der følger denne tutorial, skal du oprette en GUI, der ser sådan ud nedenfor:

den flydende “logo” – tekst er en pladsholder til et billede, som vi vil indlæse. Det vil blive forklaret senere!

Designer til Python

Gem UI-filen i din projektmappe som “mainDialog.ui”, jeg kan godt lide at oprette en undermappe kaldet” ui ” og derefter gemme den der, så vi kan holde projektmappen organiseret.

når det er gemt, skal vi konvertere det til noget, som Python faktisk forstår. Brug kommandoprompten til at navigere til ui-undermappen. Hvis du også gør dette i et virtuelt miljø, skal du sikre dig, at du også er i dit virtuelle miljø, der indeholder Pykt5-installation.

skriv denne kode for at navigere til den mappe, der indeholder ui-filen og konvertere .ui-fil til en. py-fil:

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

i roden af projektmappen skal du oprette en Python-fil kaldet “main.py”. Indtast denne kode:

Kør main.py fil ved hjælp af din Python tolk. Tillykke! Nu Python kan køre koden og din GUI vil poppe op. Jeg vil forklare de vigtige dele af koden hidtil:

• linje 5: Vi importerer mainDialog.py fil inde fra ui-undermappen. Jeg bruger et alias “mainDialog” for at gøre navngivningen lettere.
• linje 10: denne klasse indeholder alle de funktioner, der er relateret til dit mainDialog-vindue, som du lige har lavet. Det første argument kalder på Kvdialog-objektet, som er den type GUI, vi bruger. Det andet argument er baseret på det alias, vi erklærede, og det er ui_dialog-klassen inde i Python-filen, der blev genereret fra .ui – filkonvertering
• linje 12: funktionen __init__ er vigtig, fordi det er den kode, du vil køre, når programmet starter. Så det er her selvet.setupUi (self) kommer ind, fordi du vil have brugergrænsefladen til at køre, når du åbner programmet. Vi lægger ting som indlæsning af konfigurationsfiler og knapfunktionalitet her, fordi vi vil have dem til at fungere, så snart vi kører programmet.
• linje 20: Dette er den kode, der udfører og åbner GUI ‘ en.

tilføjelse af funktioner til knapperne og objekterne

nu har vi vores smukke GUI. Hvordan får vi det til at gøre valuta? Lad os tilføje funktionen til at indlæse de seneste valutakurser, som jeg viste i begyndelsen af dette indlæg. Lad os derefter indsætte koden for at forbinde objekterne til Python-koden.

når du prøver at oprette forbindelse til de objekter, du oprettede i Designer, skal du starte med “selvet.”. Så hvis dit objekt i Pykt Designer blev kaldt labelTitle, vil du kalde objektet ved at skrive i selv.labelTitle. Hvis dit objekt blev kaldt lineEditInputDirectory så vil du kalde det ved at skrive selv.lineEditInputDirectory og så videre.

tjek Github-kernen og forklaringen nedenfor:

linje 16: Denne funktion kaldes, når brugeren klikker på knappen for at indlæse valutakurser. Selve objektet er selv.pushButtonLoadRates men vi vedhæfter funktionalitet, når brugeren klikker på det ved at tilføje .trykke.tilslutte(). Denne funktion har nogle specifikke nuancer. Argumentet for .connect () accepterer kun funktionen uden parentesen, så i dette tilfælde selv.load_rates. Hvis du har brug for at tilføje argumenter på grund af kravene i Python-funktionen, skal du bruge en lambda, se kodeblokken nedenfor:

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

linje 19: .currenttekst () får den aktuelle streng af kombinationsboksobjektet, som vil være vores referencevaluta. Så hvis brugeren vælger USD, returnerer den valutakurser i forhold til 1 USD. Denne streng føjes til URL ‘en, der bruges til at oprette forbindelse til API’ en i den næste linje.

linjer 24-26: disse bruges til at indlæse vores data på lineEdit-objekter. Vi bruger .indstillingstekst () for at ændre teksten på linjenrediger objekter. Det accepterer kun strenge, så tallene fra API skal konverteres til streng.

tilføjelse af en konfigurationsfil

denne del er lidt vanskelig og er hvor din eksisterende Python-viden vil være nyttig. I dette afsnit dækker vi følgende funktioner:

• åbning af et nyt vindue i programmet
• oprettelse og brug af en konfigurationsfil

nu hvor vi har et arbejdsprogram, lad os sige, at Af hensyn til et eksempel har forskellige mennesker i din afdeling forskellige behov, og de arbejder alle med forskellige valutaer. Vi kan gøre deres liv lettere ved at tilføje en konfigurationsfil, så de ikke behøver at bruge rullelisten hver gang. Ved hjælp af en konfigurationsfil kan vi gemme deres unikke indstillinger og derefter indlæse den, når programmet starter.

det er her” Config ” knappen kommer ind. Lad os oprette et nyt vindue, hvor brugeren kan ændre deres indstillinger. At gøre dette giver os mulighed for at holde hovedvinduet rent og organiseret.

Gem dette i din UI-mappe som configdialog.ui, og som vi gjorde tidligere i denne tutorial, skal du konvertere den ved hjælp af den samme pyuic5-kommando som vist i kodeblokken nedenfor:

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

nu er her, hvordan den opdaterede kode skal se ud nedenfor. Forklaringerne til de nye kodetilføjelser er under denne Github-kerne:

• linje 6: Vi tilføjer config-dialogvinduet gennem denne importerklæring
• linje 10-11: nye importerklæringer, der er relevante for at have en dejlig konfigurationsfilarbejdsproces. pickle og os begge kommer med din standard Python miljø og behøver ikke yderligere installationer.
• linje 13-14: Placeringen af konfigurationsfilen bruges hele scriptet i alle klasser, så vi erklærer det som en global og gør det hele-caps, da det er en konstant.
• linje 17: denne klasse indeholder alle relevante oplysninger til konfigurationsvinduet. Hvis du vil ringe til objekter i den konfigurationsfil, du har lavet, anbefales det, at opkaldet foretages i denne klasse, ikke MainDialog-klassen.
• linje 23: vi indlæser den eksisterende konfigurationsfil. Vi gør dette, så vi kan vise, hvad der er den aktuelle indstilling for brugeren.
• linje 26: Ved hjælp af den indlæste konfigurationsfil indstiller vi kombinationsboksteksten til den aktuelle indstilling.
• linje 33: når vi gemmer config, vil vi opdatere ordbogen gemt i self.config før du skriver konfigurationsfilen.
• linje 39: dette lukker konfigurationsparametervinduet.
• linje 48-54: dette er logikken, når du indlæser konfigurationsfilen i hoveddialogvinduet. Af en eller anden grund kan konfigurationsfilen forsvinde, og derefter starter programmet ikke på grund af fejl. Hvis konfigurationsfilen mangler, skal du oprette en konfigurationsfil med standardparametre, så brugeren stadig kan starte programmet og derefter ændre parametrene senere.
• linje 56: vi indlæser de brugerdefinerede indstillinger og indstiller kombinationsboksen til brugerens foretrukne valuta.
• linje 62-63: dette starter konfigurationsparametervinduet. Dette er baseret på navnet på konfigurationsdialogklassenavnet. I dette tilfælde hedder klassen Configparametre.
• linje 65-68: når brugeren er færdig med at konfigurere deres indstillinger, og vinduet er lukket. Programmet opdaterer sig selv og indlæser konfigurationsfilen igen, før du opdaterer kombinationsboksen referencevaluta.

denne arbejdsgang giver brugeren mulighed for at gemme deres unikke indstillinger, og programmet fungerer stadig, hvis konfigurationsfilen mangler. Du vil prøve at redegøre for ethvert problem, dit program vil støde på.

tilføjelse af billeder

nu har du et fuldt funktionelt program, lad os tilføje sidste hånd: et logo. Selvom der kan være en ressourcefil, hvor du kan gemme billeder, foretrækker jeg bare at indlæse billeder ved hjælp af etiketter og billedkort. Dette er meget hurtigt.

linje 56-58: vi indlæser logoet, som jeg gemte i ui-mappen. Derefter indstiller jeg labelLogo-objektet til at indlæse billedkortet og indstiller indholdet til at skalere til størrelsen på labelLogo-objektet.

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. Jeg brugte utallige timer på at google disse ting, og endda betalte tutorials på Udemy var lidt ubrugelige.