En effektiv Python + PyQt Designer arbeidsflyt

før Vi begynner, antas det at du har middels til avansert kunnskap Om Python. Dette inkluderer grunnleggende datatyper (spesielt ordbøker), setninger og funksjoner. Kunnskap om Objektorientert Programmering (Oop) ville være nyttig, men ikke nødvendig.Dette vil være en rask tutorial på å lage En Python GUI ved hjelp Av en kombinasjon Av Python PyQt bibliotek og Designer. Designer er et program som leveres Med PyQt og lar deg lage GUI visuelt. Vi vil bruke Bare Designer og En Python IDE / tekst editor. Python GUI trenger ikke å være komplisert!

La oss se på å lage En Python GUI arbeidsflyt med disse funksjonene:

• en konfigurasjonsfil for egendefinerte brukerinnstillinger
• Flere vinduer i programmet
• Legge til funksjoner til knapper, input bokser, Og andre klikkbare elementer
• Bilder Og logoer

Dette er egentlig alt du trenger for en enkel, men robust Python GUI. I denne opplæringen la oss bare lage en enkel valutakalkulator.

Vi skal bruke Python 3.6 i denne opplæringen, og jeg vil lage denne opplæringen i et virtuelt miljø ved Hjelp Av Windows 10. I denne opplæringen trenger vi bare å installere PyQt5 FOR GUI og forespørsler om vårt prøveprosjekt. Dette vil bli gjort ved hjelp av pip. Det er viktig å merke Seg At Designer ikke kommer med pip PyQt5 installasjon og må installeres separat. Kodeblokken nedenfor viser kommandoene du må skrive inn:

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.

Søk etter»opp

valuta data

vi kan få gratis forex data fra exchangerate-api som beleilig har en api vi kan bruke. API returnerer EN JSON objekt med valuta informasjon som kan navigeres ved hjelp Av En Python ordbok. Valutakursene er basert på hovedvalutaen du angir.

i eksemplet nedenfor vil vi se På Forex ved å bruke 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.
}
}

Opprette GUI

nå kommer den morsomme delen. Opprette GUI!

når Du åpner Qt Designer, åpnes denne meldingen. Jeg vil starte med et tomt lerret, så jeg velger «Dialog uten Knapper» og klikker deretter «Opprett».

nå har du et tomt dialogvindu å jobbe med. Du kan begynne å legge til widgets ved hjelp av listen til venstre. Du legger til disse widgets ved å dra og slippe dem på GUI vinduet. Mens det er mange widgets, i denne opplæringen vil jeg bare dekke følgende widgets:

• Etiketter
• Trykknapp
• Line Edit
• Kombinasjonsboks

Kombinasjonsboksen Er også kjent som en rullegardinliste, og du kan fylle denne listen ved å dobbeltklikke På Kombinasjonsboksobjektet I Designer, det vil gi deg et vindu der du kan legge til elementer. I dette tilfellet vil vi legge til valutaene vi bruker. Dette vil la brukeren bestemme hvilken valuta de vil bruke som referansevaluta.

nederst til venstre

når du begynner å legge til disse widgets bør du sørge for at de er navngitt riktig slik at du kan referere til dem lett i python-koden. Dette gjøres ved å bruke objectName I Egenskapsredigereren til høyre. Vanligvis legger jeg bare til funksjonen til det eksisterende navnet, for eksempel labelTitle eller lineEditLocationDetails. Denne stilen med navngivning hjelper meg å huske hvilken TYPE GUI-objekt jeg jobber med når jeg skriver Python-koden.

objektnavn (uthevet i rødt) vil være variabelen navn når vi jobber med python-koden

stil det slik du vil, men for de som følger denne opplæringen, opprett en gui som ser slik ut nedenfor:

Min vakre GUI

den flytende»logo» – teksten er en plassholder for et bilde som vi vil laste. Det vil bli forklart senere!

Qt Designer Til Python

Lagre UI-filen i prosjektmappen din som » mainDialog.ui», jeg liker å lage en undermappe kalt «ui» og lagre den der, slik at vi kan holde prosjektmappen organisert.

når Den er lagret, må vi konvertere den til noe Som Python faktisk forstår. Bruk ledeteksten, naviger til ui-undermappen. Hvis du også gjør dette i et virtuelt miljø, må du sørge for at du også er i ditt virtuelle miljø som inneholder PyQt5-installasjon.

Skriv inn denne koden for å navigere til mappen som inneholder ui-filen og konvertere den .ui-fil til en. py-fil:

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

i roten av prosjektmappen oppretter Du En Python-fil som heter «main.py». Skriv inn denne koden:

Kjør main.py fil ved hjelp Av Python tolk. Gratulerer! Nå Kan Python kjøre koden og GUI vil dukke opp. Jeg skal forklare de viktige delene av koden så langt:

• Linje 5: Vi importerer mainDialog.py fil fra innsiden av ui-undermappen. Jeg bruker et alias «mainDialog» for å gjøre navngivningen enklere.
• Linje 10: denne klassen inneholder alle funksjonene knyttet til mainDialog-vinduet som du nettopp har laget. Det første argumentet kaller På QDialog-objektet som er TYPEN GUI vi bruker. Det andre argumentet er basert pa aliaset vi deklarerte, og Det Er ui_dialog-klassen inne I Python-filen som ble generert fra den .Ui-filkonvertering
• Linje 12:__ init _ _ – funksjonen er viktig fordi det er koden du vil kjøre når programmet starter opp. Så dette er hvor selvet.setupUi (self) kommer inn fordi DU VIL AT BRUKERGRENSESNITTET skal kjøre når du åpner programmet. Vi vil sette ting som å laste konfigurasjonsfiler og knappfunksjonalitet her fordi vi vil at de skal fungere så snart vi kjører programvaren.
• Linje 20: dette er koden som utfører OG åpner GUI.

Legge Til Funksjoner På Knappene og Objektene

Nå har Vi vår vakre GUI. Hvordan får Vi Det Til Å Gjøre Forex? La oss legge til funksjonen for å laste de siste Forex-prisene som jeg viste i begynnelsen av dette innlegget. Så, la oss sette inn koden for å koble objektene Til Python-koden.

når du prøver å koble til objektene du opprettet I Designer, må du starte med » selv.”. Så hvis objektet Ditt I PyQt Designer ble kalt labelTitle, vil du ringe objektet ved å skrive inn selv.etiketttittel. Hvis objektet ditt ble kalt lineEditInputDirectory, vil du ringe det ved å skrive selv.lineEditInputDirectory og så videre.

Sjekk Ut Github gist og forklaringen nedenfor:

Linje 16: Denne funksjonen kalles når brukeren klikker på knappen for å laste Forex priser. Objektet i seg selv er selv.pushButtonLoadRates men vi legger funksjonalitet når brukeren klikker det ved å legge .klikke.koble(). Denne funksjonen har noen spesifikke nyanser. Argumentet for .connect () aksepterer bare funksjonen uten parentes, så i dette tilfellet selv.load_rates. Hvis du trenger å legge til argumenter på grunn av Kravene Til Python-funksjonen, må du bruke en lambda, se kodeblokken nedenfor:

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

Linje 19: .currentText () får gjeldende streng av comboBox objekt som vil være vår referanse valuta. Så hvis brukeren velger USD, vil Den returnere Forex priser i forhold til 1 USD. Denne strengen legges TIL NETTADRESSEN som brukes til å koble TIL API i neste linje.

Lines 24-26: Disse brukes til å laste våre data på lineEdit objekter. Vi bruker .setText () for å endre teksten på linjenrediger objekter. Det aksepterer bare strenger, så tallene fra API skal konverteres til streng.

Siste Forex priser sammenlignet med 1 Filippinsk Peso/figcaption>

legge til en konfigurasjonsfil

denne delen er litt vanskelig og er der din eksisterende python kunnskap vil være nyttig. I denne delen vil vi dekke følgende funksjoner:

• Åpne et nytt vindu i programmet
• Opprette og bruke en konfigurasjonsfil

Nå som vi har et arbeidsprogram, la oss si at forskjellige personer i avdelingen din har forskjellige behov, og de jobber alle med forskjellsvalutaer. Vi kan gjøre livet enklere ved å legge til en config-fil, slik at de ikke trenger å bruke rullegardinlisten hver gang. Ved hjelp av en config-fil kan vi lagre sine unike innstillinger og deretter laste den når programmet starter opp.

det er her» Config » – knappen kommer inn. La oss opprette et nytt vindu for brukeren å endre innstillingene. Dette gjør at vi kan holde hovedvinduet rent og organisert.

lagre dette i ui-mappen som configdialog.ui og som vi gjorde tidligere i denne opplæringen, konvertere den ved hjelp av samme pyuic5 kommando som sett i kodeblokken nedenfor:

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

Nå her er hva den oppdaterte koden skal se ut nedenfor. Forklaringene for den nye koden tilleggene er under Denne Github gist:

• Linje 6: vi legger til dialogboksen config gjennom denne import setningen
• Linje 10-11: Nye import setninger som er relevante for å ha en fin config fil arbeidsflyt. pickle og os begge kommer med standard Python miljø og trenger ikke flere installasjoner.
• Linje 13-14: Plasseringen av konfigurasjonsfilen brukes hele skriptet i alle klassene, så vi erklærer det som en global og gjør det all-caps siden det er en konstant.
• Linje 17: denne klassen inneholder all relevant informasjon for config-vinduet. Hvis du vil ringe objekter i config UI-filen du har laget, anbefales det at samtalen gjøres i denne klassen, ikke MainDialog-klassen.
• Linje 23: vi laster den eksisterende konfigurasjonsfilen. Vi gjør dette slik at vi kan vise hva som er gjeldende innstilling til brukeren.
• Linje 26: Ved hjelp av den lastede konfigurasjonsfilen setter vi kombinasjonsboksteksten til hva gjeldende innstilling er.
• Linje 33: Når vi lagrer config, vil vi oppdatere ordboken lagret i selv.config før du skriver config-filen.
• Linje 39: dette lukker konfigurasjonsparametervinduet.
• Linje 48-54: dette er logikken når du laster inn config-filen i hoveddialogvinduet. Uansett grunn kan config-filen gå glipp av, og programmet vil ikke starte på grunn av feil. Hvis config-filen mangler, opprett en config-fil med standardparametere slik at brukeren fortsatt kan starte programmet og deretter endre parametrene senere.
• Linje 56: vi laster inn de egendefinerte innstillingene og setter Kombinasjonsboksen til brukerens foretrukne valuta.
• Linje 62-63: dette starter konfigurasjonsparametervinduet. Dette er basert på navnet på config dialog klasse navn. I dette tilfellet heter klassen ConfigParameters.
• Linje 65-68: etter at brukeren er ferdig med å konfigurere innstillingene og vinduet er lukket. Programmet vil oppdatere seg selv og laste config filen igjen før du oppdaterer referanse valuta kombinasjonsboksen.

denne arbeidsflyten lar brukeren lagre sine unike innstillinger, og programmet vil fortsatt fungere hvis config-filen mangler. Du vil prøve å ta hensyn til hvert problem programmet ditt vil støte på.

Legge til bilder

Nå har du et fullt funksjonelt program, la oss legge til slutt: en logo. Mens Det kan være En PyQt ressursfil der du kan lagre bilder, foretrekker jeg å bare laste bilder ved hjelp av etiketter og pixmaps. Dette er veldig raskt.

Linje 56-58: vi laster inn logoen som jeg lagret i ui-mappen. Deretter setter jeg labelLogo-objektet for å laste pixmap og sette innholdet til å skalere til størrelsen på labelLogo-objektet.

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. Jeg tilbrakte utallige timer googling disse tingene og selv betalt tutorials På Udemy var litt ubrukelig.