Primi pași cu Qt Designer

Acest tutorial necesită instalarea Qt Creator – îl puteți descărca gratuit de pe site-ul Qt. Mergeți la https://www.qt.io/download și descărcați pachetul Qt. Puteți opta să instalați doar Creator în timpul instalării.

Deschideți Qt Creator și vi se va prezenta fereastra principală. Designerul este disponibil prin intermediul filei din partea stângă. Cu toate acestea, pentru a-l activa, trebuie mai întâi să începeți să creați un fișier .ui.

Interfața Qt Creator, cu secțiunea Design afișată în partea stângă.

Pentru a crea un fișier .ui mergeți la File -> New File or Project… În fereastra care apare, selectați Qt sub Files and Classes în stânga, apoi selectați Qt Designer Form în dreapta. Veți observa că pictograma are „ui” pe ea, arătând tipul de fișier pe care îl creați.

Crearea unui nou fișier Qt .ui.

În pasul următor veți fi întrebat ce tip de widget doriți să creați. Dacă începeți o aplicație, atunci Main Window este alegerea corectă. Cu toate acestea, puteți crea, de asemenea, fișiere .ui pentru casete de dialog, formulare și widget-uri compuse personalizate.

Selectați tipul de widget de creat, pentru majoritatea aplicațiilor acesta va fi Main Window.

În continuare, alegeți un nume de fișier și un dosar de salvare pentru fișierul dvs. Salvați fișierul .ui cu același nume ca și clasa pe care o veți crea, doar pentru a simplifica comenzile ulterioare.

Alegeți numele și dosarul de salvare a fișierului dumneavoastră.

În cele din urmă, puteți alege să adăugați fișierul la sistemul de control al versiunilor, dacă folosiți unul. Nu ezitați să săriți peste acest pas – nu vă afectează interfața de utilizare.

Opțional, adăugați fișierul la sistemul dvs. de control al versiunilor, de exemplu Git.

Dispunerea ferestrei principale

Vă va fi prezentată fereastra principală nou creată în designerul de interfață. Nu sunt prea multe de văzut pentru început, doar o zonă de lucru gri reprezentând fereastra, împreună cu începuturile unei bare de meniu a ferestrei.

Vederea inițială a ferestrei principale create.

Puteți redimensiona fereastra făcând clic pe fereastră și trăgând mânerele albastre de pe fiecare colț.

Vederea inițială a ferestrei principale create.

Primul pas în construirea unei aplicații este adăugarea unor widgeturi în fereastra dvs. În primele noastre aplicații am învățat că pentru a seta widgetul central pentru o QMainWindow trebuie să folosim .setCentralWidget(). Am văzut, de asemenea, că pentru a adăuga mai multe widget-uri cu un aspect, avem nevoie de un QWidget intermediar la care să aplicăm aspectul, mai degrabă decât să adăugăm aspectul direct în fereastră.

Qt Creator are grijă de acest lucru pentru dvs. în mod automat, deși nu este deosebit de evident în această privință.

Pentru a adăuga mai multe widget-uri la fereastra principală cu un aspect, mai întâi trageți widget-urile dvs. pe QMainWindow. Aici tragem 3 etichete. Nu contează unde le aruncați.

Fereastra principală cu 1 etichete și 1 buton adăugate.

Am creat 2 widget-uri prin tragerea lor pe fereastră, le-am făcut copii ai acelei ferestre. Acum putem aplica un layout.

Căutați QMainWindow în panoul din dreapta (ar trebui să fie chiar în partea de sus). Dedesubt vedeți centralwidget care reprezintă widgetul central al ferestrei. Pictograma pentru widgetul central arată aspectul curent aplicat. Inițial are un cerc roșu-cruce prin ea, arătând că nu există nici un layout activ.

Clic dreapta pe obiectul QMainWindow și găsiți „Layout” în lista derulantă rezultată.

Clic dreapta pe fereastra principală și alegeți layout.

În continuare, veți vedea o listă de layout-uri pe care le puteți aplica ferestrei. Selectați Lay Out Horizontally și layout-ul va fi aplicat widget-ului.

Selectați layout-ul pentru a-l aplica la fereastra principală.

Layout-ul selectat este aplicat lawidget-ul central al QMainWindow, iar widget-urilor li se adaugă layout-ul, fiind dispuse în funcție de layout-ul selectat. Rețineți că în Qt Creator puteți, de fapt, să trageți și să reordonați widgeturile în cadrul aspectului sau să selectați un aspect diferit, după cum doriți. Acest lucru îl face deosebit de plăcut pentru a realiza prototipuri și a încerca lucruri.

Dispoziție verticală aplicată widgeturilor din fereastra principală.

Utilizarea fișierului .ui generat

Am creat o interfață de utilizator foarte simplă. Următorul pas este să o introducem în Python și să o folosim pentru a construi o aplicație funcțională.

În primul rând salvați fișierul .ui – în mod implicit se va salva în locația pe care ați ales-o în timp ce îl creați, deși puteți alege o altă locație dacă doriți.

Filierul .ui este în format XML. Pentru a utiliza interfața noastră UI din Python avem la dispoziție două metode alternative –

1. încărcați-o într-o clasă folosind metoda .loadUI()
2. convertiți-o în Python folosind instrumentul pyuic5.

Aceste două abordări sunt acoperite mai jos. Personal, prefer să convertesc UI într-un fișier Python pentru a păstra lucrurile similare din punct de vedere al ambalării & programării.

Încărcarea directă a fișierului .ui

Pentru a încărca fișierele .ui putem folosi modulul uic inclus cu PyQt5, în special metoda uic.loadUI(). Aceasta ia numele de fișier al unui fișier UI și îl încarcă creând un obiect PyQt5 complet funcțional.

Pentru PySide2 puteți folosi o instanță QUiLoader și apela metoda loader.load() pentru a realiza același lucru.

Un UI (foarte) simplu proiectat în Qt Creator

Deoarece metoda uid.loadUI() transformă un obiect de instanță, nu puteți atașa cod personalizat __init__(). Cu toate acestea, puteți gestiona acest lucru printr-o funcție de configurare personalizată

Pentru a încărca o interfață de utilizator din blocul __init__ al unui widget existent (de exemplu, un QMainWindow) puteți folosi uic.loadUI(filename, self) pentru PyQt5.

Încărcătorul PySide2 nu acceptă această abordare – al doilea parametru este pentru widgetul părinte al widgetului pe care îl creați. Acest lucru vă împiedică să adăugați cod personalizat la inițializarea widget-ului, dar puteți rezolva acest lucru cu o funcție init separată.

Convertirea fișierului .ui în Python

Pentru a genera un fișier de ieșire Python rulați pyuic5 din linia de comandă, trecând fișierul .ui și fișierul țintă pentru ieșire, cu un parametru -o. Ceea ce urmează va genera un fișier Python numit MainWindow.py care conține interfața noastră UI creată.

pyuic5 mainwindow.ui -o MainWindow.py

Dacă utilizați PyQt4, instrumentul se numește `pyuic4`, dar în rest este complet identic.

Puteți deschide fișierul MainWindow.py rezultat într-un editor pentru a arunca o privire, deși nu ar trebui să editați acest fișier. Puterea utilizării Qt Creator constă în posibilitatea de a vă putea edita, ajusta și actualiza aplicația în timp ce dezvoltați. Orice modificare efectuată în acest fișier va fi pierdută atunci când îl actualizați. Cu toate acestea, puteți să suprascrieți și să modificați tot ce doriți atunci când importați și utilizați fișierul în aplicațiile dumneavoastră.

Importul fișierului Python rezultat funcționează ca pentru orice alt fișier. Puteți importa clasa dvs. după cum urmează. Instrumentul pyuic5 adaugă Ui_ la numele obiectului definit în Qt Creator, iar acest obiect este cel pe care doriți să îl importați.

from MainWindow import Ui_MainWindow

Pentru a crea fereastra principală în aplicația dumneavoastră, creați o clasă în mod normal, dar subclasând atât din QMainWindow cât și din clasa Ui_MainWindow importată de dumneavoastră. În cele din urmă, apelați self.setupUi(self) din interiorul __init__ pentru a declanșa configurarea interfeței.

Aceasta produce exact același rezultat ca și înainte.

O interfață de utilizator (foarte) simplă proiectată în Qt Creator

Asta este. Fereastra dumneavoastră este acum complet configurată. Deoarece utilizarea unui fișier .ui face abstracție de codul specific interfeței de utilizator, puteți utiliza același model pentru a încărca orice interfață pe care o proiectați.

Aducerea logicii aplicației

Puteți interacționa cu widget-urile create prin Qt Creator la fel ca și cu cele create cu cod. Pentru a face lucrurile mai simple uic adaugă toate widgeturile copil la obiectul fereastră după numele lor id, așa cum este specificat în Qt Creator. Vom acoperi cum să lucrăm cu acestea în partea următoare.

.