construirea unei GUI Python cu PyQt Designer

un flux de lucru eficient Python + PyQt Designer

înainte de a începe, se presupune că aveți cunoștințe intermediare până la avansate despre Python. Aceasta include tipuri de date de bază (în special dicționare), declarații și funcții. Cunoștințele despre programarea orientată pe obiecte (OOP) ar fi utile, dar nu sunt necesare.

acesta va fi un tutorial rapid despre realizarea unei GUI Python folosind o combinație între biblioteca Python PyQt și Designer. Designer este un program care vine cu PyQt și vă permite să creați vizual GUI. Vom folosi doar Designer și un IDE Python / editor de text. Python GUI nu trebuie să fie complicat!

să ne uităm la crearea unui flux de lucru Python GUI cu aceste caracteristici:

  • un fișier de configurare pentru setările de utilizator personalizate
  • mai multe ferestre în cadrul programului
  • adăugarea de funcții la butoane, cutii de intrare, și alte elemente se poate face clic
  • imagini și logo-uri

Acest lucru este într-adevăr tot ce ai nevoie pentru un simplu, dar robust GUI Python. În acest tutorial să creăm doar un simplu convertor valutar.

vom folosi Python 3.6 în acest tutorial și voi crea acest tutorial într-un mediu virtual folosind Windows 10. În acest tutorial va trebui doar să instalăm PyQt5 pentru GUI și cererile pentru proiectul nostru de probă. Acest lucru se va face folosind pip. Este important să rețineți că Designer nu vine cu instalarea PIP PyQt5 și trebuie instalat separat. Blocul de cod de mai jos arată comenzile pe care trebuie să le tastați:

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.

Căutare după „Designer” și ar trebui să apară

date valutare

putem obține date Forex gratuite de la exchangerate-API care are în mod convenabil un API pe care îl putem folosi. API-ul returnează un obiect JSON cu informațiile despre monedă care pot fi navigate folosind un dicționar Python. Ratele de schimb se bazează pe moneda principală pe care o specificați.

în exemplul de mai jos vrem să ne uităm la Forex folosind dolarul american (USD) ca monedă principală.

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

crearea GUI

acum vine partea distractivă. Crearea GUI!

când deschideți Qt Designer acest prompt se va deschide. Vreau să încep cu o pânză goală, așa că voi alege „Dialog fără butoane” și apoi faceți clic pe „Creați”.

acum aveți o fereastră de dialog goală cu care să lucrați. Puteți începe să adăugați widget-uri folosind lista din stânga. Adăugați aceste widget-uri prin glisarea și fixarea lor pe fereastra GUI. În timp ce există multe widget-uri, în acest tutorial voi acoperi doar următoarele widget-uri:

  • etichete
  • buton
  • editare linie
  • Combo Box

caseta Combo este, de asemenea, cunoscut ca o listă verticală și puteți popula această listă făcând dublu clic pe caseta Combo obiect în Designer, acesta vă va oferi o fereastră în care puteți adăuga elemente. În acest caz, vom adăuga monedele pe care le folosim. Acest lucru va permite utilizatorului să decidă ce monedă dorește să utilizeze ca monedă de referință.

popula widget-ul făcând clic pe butonul de adăugare verde de pe stânga jos

când începeți să adăugați aceste widget-uri ar trebui să vă asigurați că acestea sunt denumite în mod corespunzător, astfel încât să puteți face referire la ele cu ușurință în codul Python. Acest lucru se face folosind objectName în Editorul de proprietăți din dreapta. De obicei, am adăuga doar funcția lor la numele existent, cum ar fi labelTitle sau lineEditLocationDetails. Acest stil de denumire mă ajută să-mi amintesc cu ce tip de obiect GUI lucrez atunci când tastez codul Python.

objectName (evidențiat în roșu) va fi numele variabilei când lucrăm cu codul Python

stilați-l cum doriți, dar pentru cei care urmează acest tutorial creați o interfață grafică care arată astfel mai jos:

frumoasa mea interfață grafică

acel text „logo” plutitor este un substituent pentru o imagine pe care o vom încărca. Acest lucru va fi explicat mai târziu!

Qt Designer pentru Python

salvați fișierul UI în folderul de proiect ca „mainDialog.ui”, îmi place să creez un sub-folder numit ” ui ” și apoi să îl salvez acolo, astfel încât să putem păstra folderul proiectului organizat.

odată ce este salvat, trebuie să-l convertim în ceva ce Python înțelege de fapt. Folosind promptul de comandă, navigați la sub-folderul ui. Dacă faceți acest lucru și într-un mediu virtual, asigurați-vă că vă aflați și în mediul virtual care conține instalarea PyQt5.

tastați acest cod pentru a naviga la folderul care conține fișierul ui și pentru a converti .fișier ui într-un fișier .py:

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

în rădăcina folderului de proiect, creați un fișier Python numit „main.py”. introduceți acest cod:

rulați main.py fișier folosind interpretul Python. Felicitări! Acum Python poate rula codul și GUI-ul dvs. va apărea. Voi explica părțile importante ale codului până acum:

  • linia 5: importăm mainDialog.py fișier din interiorul sub-folderului ui. Folosesc un alias „mainDialog” pentru a ușura denumirea.
  • linia 10: această clasă deține toate funcțiile legate de fereastra mainDialog pe care tocmai ați făcut-o. Primul argument face apel la obiectul QDialog, care este tipul de GUI pe care îl folosim. Al doilea argument se bazează pe Aliasul pe care l-am declarat și este clasa Ui_Dialog din fișierul Python care a fost generat din .ui file conversion
  • linia 12: funcția _ _ init _ _ este importantă deoarece este codul pe care doriți să îl rulați la pornirea programului. Deci, aici este sinele.setupUi (auto) vine pentru că doriți UI pentru a rula atunci când deschideți programul. Vom pune lucruri precum încărcarea fișierelor de configurare și funcționalitatea butoanelor aici, deoarece dorim ca acestea să funcționeze imediat ce rulăm software-ul.
  • linia 20: Acesta este codul care execută și deschide GUI.

adăugarea de funcții la butoanele și obiectele

acum avem GUI nostru frumos. Cum facem să facem Forex? Să adăugăm funcția pentru a încărca cele mai recente rate Forex pe care le-am arătat la începutul acestui post. Apoi, să punem codul pentru a conecta obiectele la codul Python.

când încercați să vă conectați la obiectele pe care le-ați creat în Designer, trebuie să începeți cu „sinele”.”. Deci, dacă obiectul dvs. din PyQt Designer a fost numit labelTitle, veți apela obiectul tastând în sine.labelTitle. Dacă obiectul dvs. a fost numit lineEditInputDirectory, atunci îl veți numi tastând self.lineEditInputDirectory și așa mai departe.

Check out GitHub gist și explicația de mai jos:

linia 16: această funcție este apelată atunci când utilizatorul face clic pe butonul pentru a încărca ratele Forex. Obiectul în sine este sine.pushButtonLoadRates dar atașăm funcționalitate atunci când utilizatorul face clic prin adăugarea .clic.conectați (). Această funcție are unele nuanțe specifice. Argumentul pentru .connect () acceptă numai funcția fără paranteză, astfel încât, în acest caz, de sine.ratele de încărcare. Dacă trebuie să adăugați argumente din cauza cerințelor funcției Python trebuie să utilizați un lambda, consultați blocul de cod de mai jos:

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

linia 19:.currentText () primește șirul curent al obiectului comboBox care va fi moneda noastră de referință. Deci, dacă utilizatorul selectează USD, acesta va returna ratele Forex în raport cu 1 USD. Acest șir este adăugat la URL-ul care este utilizat pentru a vă conecta la API în linia următoare.

liniile 24-26: acestea sunt folosite pentru a încărca datele noastre pe obiecte lineEdit. Noi folosim .setText () pentru a modifica textul de pe obiectele lineEdit. Acceptă doar șiruri, astfel încât numerele din API ar trebui convertite în șir.

cele mai recente rate Forex în comparație cu 1 Peso filipinez

adăugarea unui fișier de configurare

această parte este un pic dificil și este în cazul în care cunoștințele Python existente vor fi utile. În această secțiune vom acoperi următoarele caracteristici:

  • deschiderea unei noi ferestre în cadrul programului
  • crearea și utilizarea unui fișier de configurare

acum că avem un program de lucru, să spunem că, de dragul unui exemplu, diferiți oameni din departamentul dvs. au nevoi diferite și toți lucrează cu valute diferite. Le putem ușura viața adăugând un fișier de configurare, astfel încât să nu fie nevoiți să folosească caseta derulantă de fiecare dată. Folosind un fișier de configurare, le putem salva setările unice și apoi le putem încărca la pornirea programului.

aici intervine butonul „Config”. Să creăm o fereastră nouă pentru ca utilizatorul să își modifice setările. Făcând acest lucru ne permite să păstrăm fereastra principală curată și organizată.

salvați acest lucru în folderul UI ca configdialog.ui și așa cum am făcut mai devreme în acest tutorial, convertiți-l folosind aceeași comandă pyuic5 așa cum se vede în blocul de cod de mai jos:

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

acum iată cum ar trebui să arate codul actualizat mai jos. Explicațiile pentru noile adăugiri de cod sunt sub acest GitHub gist:

  • linia 6: adăugăm fereastra de dialog config prin această declarație de import
  • linia 10-11: noi declarații de import care sunt relevante pentru a avea un flux de lucru fișier de configurare frumos. pickle și os ambele vin cu mediul Python implicit și nu au nevoie de instalații suplimentare.
  • linia 13-14: Locația fișierului de configurare este utilizată pe tot parcursul scriptului în toate clasele, așa că îl declarăm ca global și îl facem all-caps, deoarece este o constantă.
  • linia 17: această clasă conține toate informațiile relevante pentru fereastra de configurare. Dacă doriți să apelați obiecte în fișierul UI de configurare pe care l-ați făcut, este recomandat ca apelul să fie efectuat în această clasă, nu în clasa MainDialog.
  • linia 23: încărcăm fișierul de configurare existent. Facem acest lucru pentru a putea arăta utilizatorului care este setarea curentă.
  • linia 26: Folosind fișierul de configurare încărcat, setăm textul casetei combo la oricare ar fi setarea curentă.
  • linia 33: când salvăm configurația, dorim să actualizăm dicționarul stocat în sine.config înainte de a scrie fișierul de configurare.
  • linia 39: aceasta închide fereastra parametrului de configurare.
  • linia 48-54: aceasta este logica la încărcarea fișierului de configurare în fereastra de dialog principală. Din orice motiv, fișierul de configurare poate dispărea și apoi programul nu se va lansa din cauza erorilor. Dacă fișierul de configurare lipsește, creați un fișier de configurare cu parametrii impliciți, astfel încât utilizatorul să poată lansa programul și apoi să modifice parametrii mai târziu.
  • linia 56: încărcăm setările personalizate și setăm caseta Combo la moneda preferată a utilizatorului.
  • linia 62-63: aceasta lansează fereastra parametrului config. Aceasta se bazează pe numele numelui clasei de dialog de configurare. În acest caz, clasa este numită ConfigParameters.
  • linia 65-68: după ce utilizatorul a terminat configurarea setărilor și fereastra este închisă. Programul se va actualiza și va încărca din nou fișierul de configurare înainte de a actualiza caseta combo valută de referință.

acest flux de lucru permite utilizatorului să-și salveze setările unice și programul va funcționa în continuare dacă fișierul de configurare lipsește. Doriți să încercați și cont pentru fiecare problemă programul va întâlni.

adăugarea de imagini

acum aveți un program complet funcțional, să adăugăm ultimele atingeri: un logo. Deși poate exista un fișier de resurse PyQt unde puteți stoca imagini, prefer să încărcați doar imagini folosind etichete și pixmaps. Acest lucru este foarte rapid.

linia 56-58: încărcăm logo-ul pe care l-am salvat în folderul ui. Apoi am setat obiectul labelLogo pentru a încărca pixmap și setați conținutul la scară la dimensiunea obiectului labelLogo.

Our final product

Final project folder structure

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. Am petrecut nenumărate ore googling aceste lucruri și chiar tutoriale plătite pe Udemy au fost un pic inutil.

Lasă un răspuns

Adresa ta de email nu va fi publicată.