Dezvoltarea interfețelor grafice cu Qt Designer

Când vă aranjați interfețele grafice Qt poate fi o sarcină destul de dificilă să plasați fiecare widget în poziția corectă pe formularele dvs. Din fericire, Qt oferă un set de manageri de aspect care simplifică procesul de poziționare a widget-urilor și vă va permite să creați cu ușurință orice tip de aspect. Pentru a așeza widget-urile într-un formular, puteți crea totul în cod sau vă puteți crea layout-ul cu Qt Designer. În acest tutorial, veți învăța cum să folosiți layout-urile Qt cu Qt Designer pentru a crea interfețe grafice complexe pentru aplicațiile dumneavoastră.

În plus, vom crea un exemplu de dialog folosind mai multe widget-uri cu un layout coerent pentru a vă consolida cunoștințele și pentru a pune totul împreună într-un dialog complet funcțional, așa cum ați crea într-o aplicație din lumea reală.

Utilizarea layout-urilor cu Qt Designer

Qt Designer este instrumentul Qt pentru proiectarea și crearea interfețelor grafice cu utilizatorul (GUI) pentru aplicații desktop. Cu Qt Designer, puteți crea ferestre, dialoguri și formulare. Acesta vă permite să adăugați diferite tipuri de widget-uri pentru a vă crea interfețe grafice folosind formulare pe ecran și o interfață bazată pe glisare și fixare.

Interfața principală a lui Qt Designer arată după cum urmează –

Qt Designer – Interfață principală

Qt Designer are o interfață clară și ușor de utilizat care vă permite să creați orice tip de interfață grafică prin glisarea widget-ului pe un formular gol. După ce ați plasat toate widgeturile pe formular, trebuie să le așezați într-un aspect coerent. Acest lucru va asigura că toate widgeturile dvs. vor fi afișate și redimensionate corespunzător atunci când formularul este previzualizat sau utilizat într-o aplicație.

Managerii de layout ai Qt sunt containere structurate care aranjează automat widgeturile copil asigurându-se că acestea utilizează bine spațiul disponibil. Plasarea widgeturilor în cadrul unui manager de aspect le așează automat în conformitate cu regulile definite. Una dintre cele mai utile caracteristici ale Qt Designer este capacitatea de a glisa și de a plasa ierarhii de layout manageri pentru a aranja widgeturile în interfețe curate și funcționale.

În Qt Designer, puteți crea obiecte de aspect prin aplicarea unui aspect unui grup de widget-uri existente. Deși este posibil să trageți layout-uri pe un formular și apoi să trageți widget-uri în layout-uri, acest lucru poate fi puțin complicat. Cea mai bună practică este ca, în schimb, să trageți toate widgeturile și distanțierele de care aveți nevoie pe formular și apoi să selectați widgeturile și distanțierele aferente și să le aplicați machetele. Folosiți următorii pași –

1. Trageți și fixați widgeturile pe formular încercând să le plasați în apropierea poziției dorite
2. Selectați widgeturile care ar trebui să fie gestionate cu un anumit layout, ținând apăsată tasta Ctrl și făcând clic pe ele
3. Aplicați layoutul corespunzător (orizontal, vertical, grilă sau formular) folosind bara de instrumente, meniul principal al Qt Designer, sau meniul contextual al formularului

Înainte de a trece la un exemplu, aruncați o privire asupra opțiunilor legate de aspect pe care le oferă Qt Designer –

1. Utilizați opțiunile de aspect din bara de instrumente principală
2. Utilizați opțiunile de aspect din meniul principal
3. Utilizați opțiunile de aspect din meniul contextual al formularului

Cea mai accesibilă modalitate de creare a aspectelor este utilizarea secțiunii de aspect din bara de instrumente principală a Qt Designer. Această secțiune arată după cum urmează –

Qt Designer – Bara de instrumente Layout

De la stânga la dreapta, veți găsi următoarele butoane –

• Lay Out Horizontally aranjează widget-urile selectate într-o dispunere orizontală unul lângă altul (combinație de taste, Ctrl+1). Această opțiune utilizează un obiect standard QHBoxLayout
• Lay Out Vertically aranjează widget-urile selectate într-o dispunere verticală, unul sub altul (Combinație de taste, Ctrl+2). Această opțiune utilizează un obiect standard QVBoxLayout
• Lay Out Horizontally in Splitter aranjează widgeturile pe orizontală folosind un splitter (combinație de taste, Ctrl+3)
• Lay Out Vertically in Splitter aranjează widgeturile pe verticală folosind un splitter (combinație de taste, Ctrl+4)
• Lay Out in a Grid aranjează widgeturile într-o grilă de tip tabel (rânduri și coloane). În mod implicit, fiecare widget ocupă o celulă a grilei, dar puteți modifica acest comportament și face ca widgeturile să se întindă pe mai multe celule (Combinația de taste, Ctrl+5). Această opțiune utilizează un obiect standard QGridLayout
• Lay Out in a Form Layout aranjează widgeturile selectate într-o dispunere pe două coloane. Coloana din stânga este de obicei destinată etichetelor care solicită anumite informații, iar coloana din dreapta include widget-uri pentru introducerea, editarea sau afișarea acestor informații (Combinație de taste, Ctrl+6)
• Break Layout această tastă vă permite să frânați o dispunere existentă. Odată ce widgeturile sunt aranjate într-un aspect, nu le puteți muta și redimensiona individual, deoarece geometria lor este controlată de aspect. Pentru a modifica widget-uri individuale, va trebui să rupeți aspectul și să îl refaceți mai târziu (Combinația de taste Ctrl+0)
• Adjust Size ajustează dimensiunea aspectului pentru a acomoda widget-urile conținute și pentru a se asigura că fiecare are suficient spațiu pentru a fi vizibil (Combinația de taste Ctrl+J)

Aceleași opțiuni legate de aspect sunt, de asemenea, disponibile prin meniul principal al Qt Designer în meniul Form și prin meniul contextual al formularului, astfel încât o puteți alege pe cea care vă place mai mult.

Acum am eliminat teoria, putem pune în practică aceste layout-uri. În următoarele secțiuni, vom folosi Qt Designer pentru a aranja widget-urile de pe formularele noastre și pentru a construi interfețe grafice frumoase și elegante pentru aplicațiile dvs. de birou. Dar înainte de a începe să experimentăm cu diferiții manageri de layout pe care Qt îi oferă, vom crea mai întâi un widget personalizat pentru a vizualiza layout-urile pe măsură ce parcurgem acest tutorial.

S-a completat .ui finalizat poate fi descărcat mai jos, dacă doriți să săriți peste acest pas.

layout-labels.ui

Dați-i drumul și porniți Qt Designer, apoi rulați următorii pași –

1. Selectați Widget în fila templates/forms a dialogului New Form. Acest lucru va crea un nou formular gol pe care să lucrați.
2. Salvați formularul dvs. ca layout-labels.ui.
3. Căutați un widget Label pe Widget Box și trageți-l pe formular.
4. Veziți la Property Editor și setați proprietatea text la 0.
5. Deschideți dialogul Text Edit și setați culoarea textului la alb. Setați dimensiunea fontului la 20 puncte și justificați textul. Apăsați OK pentru a aplica modificările.
6. Apăsați Property Editor și setați proprietatea autoFillBackground la True prin selectarea căsuței de selectare.
7. Cercetați proprietatea palette și deschideți caseta de dialog Edit Palette. Folosiți opțiunea Quick pentru a seta culoarea la roșu.

Dacă vă simțiți pierdut, aruncați o privire la următorul screencast pentru a vedea pașii în acțiune –

În acest exemplu, creați o fereastră nouă bazată pe șablonul Widget. Apoi, adăugați o etichetă, îi setați proprietatea text la 0 și îi setați culoarea de fundal la roșu.

Pentru a completa acest exemplu, repetați toți pașii pentru a adăuga încă trei etichete cu textul lor respectiv setat la 1, 2 și 3 și culorile lor setate la verde, galben și albastru. Veți obține în final un formular ca acesta:

Qt Designer – Formular cu etichete colorate

Captura de ecran de mai sus prezintă formularul inițial pe care îl veți folosi în următoarele secțiuni. Este un formular curat cu patru obiecte etichetă pe el. Puteți seta o culoare de fundal pentru fiecare etichetă pentru a le putea vedea și diferenția mai ușor în următoarele secțiuni.

Horizontal Layouts, QHBoxLayout

Puteți folosi un manager de layout orizontal (QHBoxLayout) pentru a aranja widget-urile pe un rând. Pentru a crea acest tip de layout în cod, trebuie să instanțiați clasa QHBoxLayout și apoi să adăugați widgeturile dvs. la obiectul layout. În Qt Designer este mai ușor să lucrați în sens invers.

Cu fișierul layout-labels.ui deschis, selectați mai întâi toate etichetele dvs. Pentru a face acest lucru, puteți face clic pe fiecare widget pe rând în timp ce țineți apăsată tasta Ctrl sau puteți, de asemenea, să faceți clic și să trageți cu indicatorul mouse-ului în interiorul formularului pentru a selecta widget-urile.

După ce ați selectat widget-urile, puneți-le într-o dispunere orizontală prin selectarea butonului Lay Out Horizontally din bara principală de instrumente a Qt Designer. De asemenea, puteți utiliza opțiunea Lay out->Lay Out Horizontally din meniul contextual prezentat mai jos sau puteți apăsa Ctrl+1. Următorul screencast vă va ghida prin acești pași –

Dacă dispunerea este greșită, atunci puteți anula totul cu ușurință și puteți relua din nou dispunerea lucrurilor. Pentru a anula lucrurile, puteți apăsa Ctrl+z sau puteți utiliza meniul Edit din meniul principal al Qt Designer. Dacă acest lucru nu este posibil sau nu funcționează, atunci puteți pur și simplu să întrerupeți aspectul folosind butonul Break Layout din bara principală de instrumente a Qt Designer. O altă modalitate de a întrerupe un aspect este de a apăsa Ctrl+0 sau de a alege Break Layout din meniul contextual al formularului.

Amenajări verticale, QVBoxLayout

Puteți utiliza o așezare verticală (QVBoxLayout) pentru a aranja widgeturile într-o coloană, unul deasupra celuilalt. Acest lucru poate fi foarte util atunci când creați grupuri de widgeturi și trebuie să vă asigurați că acestea sunt aliniate pe verticală.

Începând cu fișierul original layout-labels.ui, primul pas va fi să selectați widgeturile pe care trebuie să le includeți în aspectul vertical. După aceea, puteți face clic pe butonul Lay Out Vertically de deasupra barei principale de instrumente, sau puteți folosi meniul contextual, sau puteți, de asemenea, să apăsați Ctrl+2. Următorul screencast vă va ghida prin acești pași –

Dacă vă uitați mai atent la screencast, atunci puteți vedea că obiectul layout este indicat de o ramă roșie subțire care înconjoară etichetele de pe formular. Această ramă roșie nu este vizibilă la previzualizare sau în timpul execuției, este doar un ghid pe care îl puteți folosi atunci când proiectați formularul. De asemenea, observați că, obiectul layout apare în Inspectorul de obiecte, iar proprietățile sale (margini și constrângeri) sunt afișate în Editorul de proprietăți.

Grid Layouts, QGridLayout

Câteodată aveți nevoie să vă așezați widgeturile atât pe orizontală cât și pe verticală în cadrul aceluiași layout. Pentru a face acest lucru, puteți utiliza un manager de aspect de grilă (QGridLayout). Managerii de dispunere în grilă dispun widgeturile într-o grilă pătrată sau dreptunghiulară, cu toate widgeturile aliniate vertical și orizontal cu vecinii lor. Acest tip de dispunere vă poate oferi mult mai multă libertate pentru a vă aranja widgeturile pe un formular, menținând în același timp un anumit grad de structură. Această dispunere poate fi mai potrivită decât dispunerea imbricata a aranjamentelor orizontale și verticale, în special atunci când vă interesează alinierea rândurilor sau coloanelor adiacente.

Puteți construi un aranjament de tip grilă cu Qt Designer în același mod ca pentru alte aranjamente. Primul pas este să selectați grupul de widgeturi pe care doriți să le aranjați cu ajutorul unui manager de aranjament grilă. Apoi, puteți utiliza bara de instrumente, meniul contextual sau puteți apăsa Ctrl+5 pentru a configura aspectul. Urmăriți următorul screencast –

În acest caz, folosim un layout de grilă 2 x 2 pentru a aranja etichetele de pe formular. Observați că, pentru a utiliza acest tip de dispunere, trebuie mai întâi să plasați widget-urile în rânduri și coloane pe formular, așa cum se arată în screencastul de mai sus. Qt Designer este destul de inteligent și va încerca să mențină un design cât mai asemănător cu cel pe care l-ați creat inițial manual. Poate chiar să creeze automat aranjamente dificile pe mai multe coloane sau să umple automat celulele goale.

Form Layouts, QFormLayout

În timp ce un QGridLayout poate fi folosit pentru a aranja formulare cu intrări și etichete pe două coloane, Qt oferă, de asemenea, un layout conceput special pentru acest scop – (QFormLayout). Acest tip de aspect este ideal atunci când creați o aplicație structurată de introducere a datelor sau o bază de date. Coloana din stânga va conține în mod obișnuit etichete care solicită anumite informații. Coloana din dreapta conține widgeturile de intrare, cum ar fi editarea liniilor (QLineEdit), casetele de rotire (QSpinBox), editarea datelor (QDateEdit), casetele combo (QComboBox) și așa mai departe.

Avantajul utilizării acestui aspect față de QGridLayout este că este mai simplu de lucrat atunci când aveți nevoie doar de două coloane. Următorul screencast îl arată în acțiune –

În acest exemplu, adăugăm mai întâi patru etichete noi. Aceste etichete vor conține informații despre datele pe care aveți nevoie să fie introduse sau editate în cea de-a doua coloană. În acest caz, a doua coloană conține etichetele colorate pentru testele dumneavoastră, dar, de obicei, această coloană va fi utilizată pentru a plasa widget-uri de intrare, cum ar fi editări de linii, casete de rotire, casete combo și așa mai departe.

Splitter Layouts

Splitter-urile sunt obiecte container care aranjează widget-urile pe orizontală sau verticală în două panouri redimensionabile. Cu acest tip de layout, puteți ajusta în mod liber cantitatea de spațiu pe care fiecare panou o ocupă pe formular, păstrând în același timp constant spațiul total utilizat. În Qt splitter layout-urile sunt gestionate cu ajutorul QSplitter.

Chiar dacă divizoarele sunt, din punct de vedere tehnic, un widget container (nu un layout), Qt Designer le tratează ca layout-uri care pot fi aplicate widget-urilor existente. Pentru a plasa un grup de widgeturi într-un splitter, mai întâi le selectați ca de obicei și apoi aplicați splitterul utilizând butonul corespunzător din bara de instrumente, comanda rapidă de la tastatură sau opțiunea de meniu contextual din Qt Designer Aruncați o privire la următorul screencast –

În acest exemplu, mai întâi aplicăm un splitter orizontal etichetelor. Observați că, va trebui să lansați previzualizarea formularului dacă doriți să vedeți splitterul în acțiune. Puteți lansa previzualizarea formularului prin apăsarea Ctrl+R. Ulterior, aplicăm un splitter vertical la etichete. În fiecare caz, puteți redimensiona liber widget-ul folosind pointerul mouse-ului.

Constituirea altor machete cu Qt Designer

Există alte câteva lucruri pe care le puteți face cu machetele în Qt Designer. De exemplu, să presupunem că aveți nevoie să adăugați un nou widget la un layout existent sau să folosiți layout-uri imbricate pentru a vă aranja widget-urile într-o interfață grafică complexă. În următoarele câteva secțiuni, vom acoperi modul de realizare a unora dintre aceste sarcini.

Inserarea obiectelor într-un layout existent

Obiectele pot fi inserate într-un layout existent prin tragerea lor din poziția lor curentă și prin plasarea lor în poziția necesară în layout. Un cursor albastru este afișat în machetă atunci când un obiect este tras peste ea pentru a indica unde va fi plasat obiectul.

Aruncați o privire la următorul screencast în care am pus trei dintre etichetele noastre într-un layout vertical și apoi ne dăm seama că am lăsat eticheta albastră în afara jocului –

De asemenea, este posibil să mutați sau să schimbați poziția unui anumit widget într-un layout. Pentru a face acest lucru, trebuie doar să trageți și să fixați widgetul în noua sa poziție în layout. Nu uitați să urmați linia albastră pentru a face acest lucru corect.

Încrucișarea layout-urilor pentru a construi interfețe grafice complexe

Puteți, de asemenea, să aninați managerii de layout-uri unul în altul folosind Qt Designer. Layout-ul interior devine apoi un copil al layout-ului care îl înconjoară. Procedând astfel, puteți crea iterativ interfețe utilizator foarte complexe, dar bine structurate.

Layout-urile pot fi imbricate atât de adânc cât aveți nevoie. De exemplu, pentru a crea o fereastră de dialog cu un rând orizontal de butoane în partea de jos și o grămadă de alte widget-uri aliniate vertical pe formular, puteți utiliza un aspect orizontal pentru butoane și un aspect vertical pentru restul widget-urilor, apoi să înglobați aceste aspecte într-un aspect vertical.

Întorcându-ne la exemplul nostru de etichete colorate, următorul screencast arată procesul de aranjare a unui aspect imbricate în Qt Designer –

În acest exemplu, mai întâi aranjăm widget-urile în pereche folosind un aspect orizontal. Apoi, aninăm ambele layout-uri într-un al treilea layout, dar de data aceasta unul vertical. Layout-urile pot fi imbricate atât de adânc cât este necesar.

Când selectați un layout copil, layout-ul său părinte poate fi selectat prin apăsarea tastei Shift în timp ce faceți clic pe el. Acest lucru vă permite să selectați rapid un anumit aspect într-o ierarhie, ceea ce altfel va fi dificil de făcut din cauza cadrului mic care delimitează fiecare manager de aspect.

Stabilirea unui aspect de nivel superior sau principal

Pasul final pe care trebuie să-l efectuați atunci când construiți un formular este combinarea tuturor aspectelor și widget-urilor într-un aspect principal sau aspect de nivel superior. Acest layout se află în vârful ierarhiei tuturor celorlalte layout-uri și widget-uri. Este vital să aveți un layout, deoarece altfel widget-urile din formularul dumneavoastră nu se vor redimensiona atunci când redimensionați fereastra.

Pentru a seta layout-ul principal, dați clic dreapta oriunde pe formularul dumneavoastră care nu conține un widget sau un layout. Apoi, puteți selecta Lay Out Horizontally, sau Lay Out Horizontally, sau puteți selecta, de asemenea, Lay Out in a Grid ca în următorul screencast –

În acest exemplu, folosim pe rând fiecare dintre cele trei layout-uri diferite ca layout de nivel superior. Mai întâi folosim un layout orizontal, apoi rupem layout-ul și folosim un layout vertical. În cele din urmă, setăm un layout grilă. Layout-ul de nivel superior pe care îl alegeți pentru layout-ul de nivel superior va depinde de cerințele dumneavoastră specifice pentru aplicația dumneavoastră.

Este important să rețineți că layout-urile de nivel superior nu sunt vizibile ca obiect separat în Object Inspector. Proprietățile sale apar sub proprietățile widget-urilor din formularul principal. De asemenea, rețineți că, dacă formularul dvs. nu are un layout, atunci pictograma acestuia apare cu un cerc roșu în Object Inspector. Un alt mod de a verifica dacă ați setat corect un aspect principal este încercarea de redimensionare a formularului, dacă există un aspect principal, atunci widgeturile dvs. ar trebui să se redimensioneze în mod corespunzător.

Cum începeți să construiți aplicații mai complexe, veți descoperi că și alte widgeturi container necesită, de asemenea, să setați un aspect de nivel superior, de exemplu QGroupBox, QTabWidget, QToolBox și așa mai departe. Pentru a face acest lucru, puteți rula aceiași pași pe care i-ați văzut aici, dar de data aceasta trebuie să faceți clic dreapta pe widgetul container.

Dezvoltarea unui dialog cu Qt Designer

Pentru un ultim și mai complet exemplu de utilizare a layout-urilor cu Qt Designer, vom crea acum un dialog pentru a introduce unele informații într-o aplicație de bază de date. Să presupunem că construim un software de management al resurselor umane pentru compania noastră Poyqote Inc.. Acum lucrăm la un formular pentru a introduce unele date despre angajații noștri. Dialogul ar trebui să prezinte utilizatorilor o interfață grafică prietenoasă pentru introducerea următoarelor date:

• Numele angajatului
• Data angajării
• Serviciul
• Postul
• Salariul anual
• Descrierea postului

Care este cel mai bun mod de a pune în pagină acest formular? Există multe opțiuni și este în mare parte o chestiune de gust și de practică. Dar aici folosim un QFormLayout pentru a aranja câmpurile de introducere în două coloane cu etichete în stânga și căsuțe de introducere în dreapta. Procesul de creare a aspectului este prezentat în următorul screencast –

Dialogul de bază este creat folosind șablonul Dialog with Buttons Bottom al Qt Designer. Apoi, adăugăm câteva etichete și câteva widgeturi de intrare, inclusiv editări de linii, editări de date, editări de text și casete combo. Apoi punem toate aceste widget-uri într-un layout de formular și, în final, definim un nivel superior sau un layout principal pentru formular.

Filmul .ui al dialogului finalizat poate fi descărcat aici.

Concluzie

Qt Designer este un instrument puternic atunci când vine vorba de crearea de interfețe grafice cu ajutorul Qt. Una dintre cele mai simple și mai utile caracteristici ale sale este capacitatea de a aranja widget-urile în diferite tipuri de layout-uri. Învățând cum să creați în mod eficient layout-uri cu Qt Designer vă poate crește vertiginos productivitatea, în special atunci când creați interfețe grafice complexe.

Acest tutorial v-a ghidat prin procesul de creare de layout-uri personalizate cu Qt Designer. Acum știți cum să obțineți cele mai bune rezultate din Qt Designer atunci când vă aranjați interfețele grafice.

.