Laying Out Your GUIs With Qt Designer

Quando si creano le GUI di Qt può essere un compito piuttosto difficile posizionare ogni widget nella giusta posizione sui moduli. Fortunatamente, Qt offre una serie di gestori di layout che semplificano il processo di posizionamento dei widget e ti permettono di creare facilmente qualsiasi tipo di layout. Per posizionare i widget in un modulo, puoi creare tutto nel codice, oppure puoi creare il tuo layout con Qt Designer. In questo tutorial, imparerai come usare i layout di Qt con Qt Designer per costruire GUI complesse per le tue applicazioni.

Inoltre, creeremo un esempio di dialogo usando diversi widget con un layout coerente per rafforzare le tue conoscenze e mettere tutto insieme in un dialogo completamente funzionale proprio come lo creeresti in un’applicazione reale.

Utilizzare i layout con Qt Designer

Qt Designer è lo strumento di Qt per progettare e creare interfacce grafiche (GUI) per applicazioni desktop. Con Qt Designer, puoi creare finestre, finestre di dialogo e moduli. Ti permette di aggiungere diversi tipi di widget per creare le tue GUI usando moduli sullo schermo e un’interfaccia basata sul drag-and-drop.

L’interfaccia principale di Qt Designer è la seguente –

Qt Designer – Interfaccia principale

Qt Designer ha un’interfaccia chiara e facile da usare che ti permette di creare qualsiasi tipo di GUI trascinando i widget su un modulo vuoto. Dopo aver posizionato tutti i widget sul modulo, è necessario inserirli in un layout coerente. Questo assicurerà che tutti i tuoi widget vengano visualizzati e ridimensionati correttamente quando il modulo viene visualizzato in anteprima o utilizzato in un’applicazione.

I gestori di layout di Qt sono contenitori strutturati che dispongono automaticamente i widget figli assicurandosi che facciano buon uso dello spazio disponibile. Posizionare i widget all’interno di un layout manager li dispone automaticamente secondo le regole definite. Una delle caratteristiche più utili di Qt Designer è la capacità di trascinare e rilasciare gerarchie di gestori di layout per organizzare i widget in interfacce pulite e funzionali.

In Qt Designer, è possibile creare oggetti di layout applicando un layout a un gruppo di widget esistenti. Anche se è possibile trascinare i layout su un modulo e poi trascinare i widget nei layout, questo può essere un po’ complicato. La pratica migliore è invece quella di trascinare tutti i widget e gli spaziatori di cui hai bisogno sul modulo e poi selezionare i widget e gli spaziatori correlati e applicare loro i layout. Usa i seguenti passi –

1. Trascina i widget sul modulo cercando di posizionarli vicino alla loro posizione desiderata
2. Seleziona i widget che devono essere gestiti con un dato layout, tenendo premuto il tasto Ctrl e cliccando su di essi
3. Applica il layout appropriato (orizzontale, verticale, griglia o modulo) usando la barra degli strumenti di Qt Designer, il menu principale, o il menu contestuale del modulo

Prima di entrare in un esempio, dai un’occhiata alle opzioni relative al layout che Qt Designer offre –

1. Usa le opzioni di layout sulla barra degli strumenti principale
2. Usa le opzioni di layout sul menu principale
3. Usa le opzioni di layout sul menu contestuale del modulo

Il modo più accessibile per creare layout è usare la sezione layout della barra degli strumenti principale di Qt Designer. Questa sezione appare come segue –

Qt Designer – Layout toolbar

Da sinistra a destra, troverai i seguenti pulsanti –

• Lay Out Horizontally dispone i widget selezionati in una disposizione orizzontale uno accanto all’altro (combinazione di tasti, Ctrl+1). Questa opzione usa un oggetto standard QHBoxLayout
• Lay Out Vertically dispone i widget selezionati in un layout verticale, uno sotto l’altro (combinazione di tasti, Ctrl+2). Questa opzione usa un oggetto standard QVBoxLayout
• Lay Out Horizontally in Splitter dispone i widget orizzontalmente usando uno splitter (combinazione di tasti, Ctrl+3)
• Lay Out Vertically in Splitter dispone i widget verticalmente usando uno splitter (combinazione di tasti, Ctrl+4)
• Lay Out in a Grid dispone i widget in una griglia tipo tabella (righe e colonne). Per impostazione predefinita, ogni widget occupa una cella della griglia, ma puoi modificare questo comportamento e fare in modo che i widget si estendano su più celle (combinazione di tasti, Ctrl+5). Questa opzione utilizza un oggetto standard QGridLayout
• Lay Out in a Form Layout dispone i widget selezionati in un layout a due colonne. La colonna di sinistra è di solito per le etichette che richiedono alcune informazioni e la colonna di destra include i widget per inserire, modificare o mostrare quelle informazioni (combinazione di tasti, Ctrl+6)
• Break Layout questo tasto ti permette di interrompere un layout esistente. Una volta che i widget sono disposti in un layout, non è possibile spostarli e ridimensionarli individualmente, perché la loro geometria è controllata dal layout. Per modificare i singoli widget, dovrai interrompere il layout e rifarlo in seguito (Combinazione di tasti Ctrl+0)
• Adjust Size regola la dimensione del layout per ospitare i widget contenuti e per assicurare che ognuno abbia abbastanza spazio per essere visibile (Combinazione di tasti Ctrl+J)

Queste stesse opzioni relative al layout sono disponibili anche attraverso il menu principale di Qt Designer sotto il menu Form e attraverso il menu contestuale del modulo, quindi puoi scegliere quella che ti piace di più.

Ora che abbiamo superato la teoria, possiamo mettere in pratica questi layout. Nelle prossime sezioni, useremo Qt Designer per disporre i widget sui nostri moduli e costruire delle belle ed eleganti GUI per le vostre applicazioni desktop. Ma prima di iniziare a sperimentare con i diversi gestori di layout che Qt offre, creeremo prima un widget personalizzato per visualizzare i layout durante questo tutorial.

Il file .ui può essere scaricato qui sotto se vuoi saltare questo passo.

layout-labels.ui

Accendi il tuo Qt Designer, poi esegui i seguenti passi –

1. Seleziona Widget nella scheda templates/forms del dialogo New Form. Questo creerà un nuovo modulo vuoto su cui lavorare.
2. Salva il tuo modulo come layout-labels.ui.
3. Cerca un widget Label sul Widget Box e trascinalo sul modulo.
4. Vai sul Property Editor e imposta la proprietà text su 0.
5. Apri la finestra Text Edit e imposta il colore del testo su bianco. Imposta la dimensione del carattere a 20 punti e giustifica il testo. Premi OK per applicare le modifiche.
6. Vai alla Property Editor e imposta la proprietà autoFillBackground su True selezionando la casella di controllo.
7. Cerca la proprietà palette e apri la finestra di dialogo Edit Palette. Usa l’opzione Quick per impostare il colore su rosso.

Se ti senti perso, dai un’occhiata al seguente screencast per vedere i passi in azione –

In questo esempio, crei una nuova finestra basata sul modello Widget. Poi, aggiungete un’etichetta, impostate la sua proprietà text su 0 e impostate il suo colore di sfondo su rosso.

Per completare questo esempio, ripetete tutti i passi per aggiungere altre tre etichette con i loro rispettivi testi impostati su 1, 2 e 3 e i loro colori su verde, giallo e blu. Ti ritroverai con un modulo come questo:

Qt Designer – Modulo con etichette colorate

Lo screenshot sopra mostra il modulo iniziale che userai per le prossime sezioni. È un modulo pulito con quattro oggetti etichetta su di esso. Puoi impostare un colore di sfondo per ogni etichetta per essere in grado di vederle e differenziarle più facilmente nelle sezioni seguenti.

Layout orizzontali, QHBoxLayout

Puoi usare un gestore di layout orizzontale (QHBoxLayout) per organizzare i widget in una riga. Per creare questo tipo di layout nel codice, devi istanziare la classe QHBoxLayout e poi aggiungere i tuoi widget all’oggetto layout. In Qt Designer è più facile lavorare nell’altro modo.

Con il tuo file layout-labels.ui aperto, prima seleziona tutte le tue etichette. Per farlo, puoi cliccare su ogni widget a turno mentre tieni premuto il tasto Ctrl o puoi anche cliccare e trascinare con il puntatore del mouse all’interno del modulo per selezionare i widget.

Una volta selezionati i widget, mettili in un layout orizzontale selezionando il pulsante Lay Out Horizontally nella barra degli strumenti principale di Qt Designer. Puoi anche usare l’opzione Lay out->Lay Out Horizontally dal menu contestuale mostrato sotto o puoi premere Ctrl+1. Il seguente screencast ti guiderà attraverso questi passi –

Se il layout è sbagliato, allora puoi facilmente annullare tutto e ricominciare a sistemare le cose. Per annullare le cose, puoi premere Ctrl+z o usare il menu Edit dalla barra dei menu principale di Qt Designer. Se questo non è possibile o non funziona, allora puoi semplicemente interrompere il layout usando il pulsante Break Layout dalla barra degli strumenti principale di Qt Designer. Un altro modo per interrompere un layout è premere Ctrl+0 o scegliere Break Layout dal menu contestuale del modulo.

Layout verticali, QVBoxLayout

Puoi usare un layout verticale (QVBoxLayout) per disporre i tuoi widget in una colonna uno sopra l’altro. Questo può essere molto utile quando stai creando gruppi di widget e hai bisogno di assicurarti che siano allineati verticalmente.

Partendo dal tuo file originale layout-labels.ui, il primo passo sarà quello di selezionare i widget che devi includere nel layout verticale. Dopo di che, puoi cliccare sul pulsante Lay Out Vertically sopra la barra degli strumenti principale, o puoi usare il menu contestuale, o puoi anche premere Ctrl+2. Il seguente screencast ti guiderà attraverso questi passi –

Se guardi meglio lo screencast, puoi vedere che l’oggetto layout è indicato da una sottile cornice rossa che circonda le etichette sul modulo. Questa cornice rossa non è visibile nell’anteprima o in fase di esecuzione, è solo una guida che puoi usare quando stai progettando il modulo. Nota anche che, l’oggetto layout appare nell’Ispettore Oggetti e le sue proprietà (margini e vincoli) sono mostrate nel Property Editor.

Grid Layouts, QGridLayout

A volte hai bisogno di disporre i tuoi widget sia orizzontalmente che verticalmente nello stesso layout. Per fare questo, puoi usare un gestore di layout a griglia (QGridLayout). I gestori di layout a griglia dispongono i tuoi oggetti in una griglia quadrata o rettangolare, con tutti gli oggetti allineati verticalmente e orizzontalmente con i loro vicini. Questo tipo di layout può darti molta più libertà nel disporre i tuoi widget su un modulo, pur mantenendo un certo grado di struttura. Questa disposizione può essere più adatta della disposizione annidata di layout orizzontali e verticali, in particolare quando ti interessa l’allineamento di righe o colonne adiacenti.

Puoi costruire un layout a griglia con Qt Designer nello stesso modo degli altri layout. Il primo passo è quello di selezionare il gruppo di widget che vuoi impaginare usando un gestore di layout a griglia. Poi, puoi usare la barra degli strumenti, il menu contestuale, o puoi premere Ctrl+5 per impostare il layout. Guarda il seguente screencast –

In questo caso, usiamo un layout a griglia 2 x 2 per disporre le etichette sul tuo modulo. Nota che, per usare questo tipo di layout, dovresti prima posizionare i tuoi widget in righe e colonne sul modulo, come mostrato nello screencast qui sopra. Qt Designer è abbastanza intelligente e cercherà di mantenere il tuo design il più simile possibile a quello che hai inizialmente creato a mano. Può anche creare automaticamente difficili disposizioni a più colonne o riempire automaticamente le celle vuote.

Form Layout, QFormLayout

Mentre un QGridLayout può essere usato per impaginare moduli con input ed etichette in due colonne, Qt fornisce anche un layout progettato specificamente per questo scopo – (QFormLayout). Questo tipo di layout è ideale quando si sta creando un’applicazione strutturata di inserimento dati o di database. La colonna di sinistra conterrà comunemente delle etichette che chiedono alcune informazioni. La colonna di destra contiene i widget di input come le modifiche di linea (QLineEdit), le caselle di rotazione (QSpinBox), le modifiche di data (QDateEdit), le caselle combinate (QComboBox), e così via.

Il vantaggio di usare questo layout rispetto a QGridLayout è che è più semplice da lavorare quando hai bisogno solo di due colonne. Il seguente screencast lo mostra in azione –

In questo esempio, aggiungiamo prima quattro nuove etichette. Queste etichette conterranno informazioni sui dati da inserire o modificare nella seconda colonna. In questo caso, la seconda colonna contiene le etichette colorate per i tuoi test, ma di solito questa colonna sarà usata per posizionare widget di input come modifiche di linea, caselle di rotazione, caselle combinate e così via.

I layout splitter

Gli splitter sono oggetti contenitore che dispongono i widget orizzontalmente o verticalmente in due pannelli ridimensionabili. Con questo tipo di layout, puoi regolare liberamente la quantità di spazio che ogni pannello occupa sul tuo modulo, mantenendo costante lo spazio totale utilizzato. In Qt i layout di splitter sono gestiti usando QSplitter.

Anche se gli splitter sono tecnicamente un widget contenitore (non un layout), Qt Designer li tratta come layout che può essere applicato ai widget esistenti. Per posizionare un gruppo di widget in uno splitter, bisogna prima selezionarli come di solito e poi applicare lo splitter usando l’appropriato pulsante della barra degli strumenti, la scorciatoia da tastiera o l’opzione del menu contestuale in Qt Designer Date un’occhiata al seguente screencast –

In questo esempio, applichiamo prima uno splitter orizzontale alle vostre etichette. Notate che dovrete lanciare l’anteprima del modulo se volete vedere lo splitter in azione. Puoi lanciare l’anteprima del modulo premendo Ctrl+R. In seguito, applichiamo uno splitter verticale alle etichette. In ogni caso, puoi ridimensionare liberamente il widget usando il puntatore del mouse.

Costruire altri layout con Qt Designer

Ci sono altre cose che puoi fare con i layout in Qt Designer. Per esempio, supponiamo che tu abbia bisogno di aggiungere un nuovo widget ad un layout esistente, o di usare layout annidati per organizzare i tuoi widget in una GUI complessa. Nelle seguenti sezioni, vedremo come realizzare alcuni di questi compiti.

Inserimento di oggetti in un layout esistente

Gli oggetti possono essere inseriti in un layout esistente trascinandoli dalla loro posizione attuale e facendoli cadere nella posizione richiesta nel layout. Un cursore blu viene visualizzato nel layout quando un oggetto viene trascinato sopra di esso per indicare dove l’oggetto verrà posizionato.

Guardate il seguente screencast dove abbiamo messo tre delle nostre etichette in un layout verticale e poi ci rendiamo conto che abbiamo lasciato l’etichetta blu fuori dal gioco –

È anche possibile spostare o cambiare la posizione di un dato widget in un layout. Per farlo, basta trascinare il widget nella sua nuova posizione nel layout. Ricorda di seguire la linea blu per farlo correttamente.

Nesting Layouts to Build Complex GUIs

Puoi anche annidare i gestori di layout uno dentro l’altro usando Qt Designer. Il layout interno diventa quindi un figlio del layout che lo racchiude. In questo modo è possibile creare iterativamente interfacce utente molto complesse, ma ben strutturate.

I layout possono essere annidati tanto in profondità quanto necessario. Per esempio, per creare una finestra di dialogo con una fila orizzontale di pulsanti in basso e un mucchio di altri widget allineati verticalmente sul modulo, è possibile utilizzare un layout orizzontale per i pulsanti e un layout verticale per il resto dei widget, quindi avvolgere questi layout in un layout verticale.

Tornando al nostro esempio di etichette colorate, il seguente screencast mostra il processo di organizzazione di un layout annidato in Qt Designer –

In questo esempio, prima disponiamo i widget in coppia usando un layout orizzontale. Poi annidiamo entrambi questi layout in un terzo layout, ma questa volta verticale. I layout possono essere annidati tanto in profondità quanto necessario.

Quando selezioni un layout figlio, il suo layout padre può essere selezionato premendo il tasto Shift mentre fai clic su di esso. Questo ti permette di selezionare rapidamente un layout specifico in una gerarchia, cosa che altrimenti sarebbe difficile da fare a causa della piccola cornice che delimita ogni gestore di layout.

Impostare un layout di livello superiore o principale

Il passo finale che devi fare quando costruisci un modulo è combinare tutti i layout e i widget in un layout principale o di livello superiore. Questo layout è in cima alla gerarchia di tutti gli altri layout e widget. È vitale che tu abbia un layout perché altrimenti i widget del tuo modulo non si ridimensioneranno quando ridimensioni la finestra.

Per impostare il layout principale basta cliccare con il tasto destro del mouse in un punto qualsiasi del tuo modulo che non contenga un widget o un layout. Poi, puoi selezionare Lay Out Horizontally, o Lay Out Horizontally, o puoi anche selezionare Lay Out in a Grid come nel seguente screencast –

In questo esempio, usiamo ciascuno dei tre diversi layout come nostro layout di livello superiore a turno. Prima usiamo un layout orizzontale, poi interrompiamo il layout e usiamo un layout verticale. Infine impostiamo un layout a griglia. Quale layout di primo livello sceglierete per il vostro layout di primo livello dipenderà dai vostri requisiti specifici per la vostra applicazione.

È importante che notiate che i layout di primo livello non sono visibili come un oggetto separato nell’Ispettore Oggetti. Le sue proprietà appaiono sotto le proprietà dei widget del modulo principale. Inoltre, nota che se il tuo modulo non ha un layout, allora la sua icona appare con un cerchio rosso nell’Ispettore Oggetti. Un altro modo per controllare se hai impostato correttamente un layout principale è provare a ridimensionare il modulo, se c’è un layout principale, allora i tuoi widget dovrebbero ridimensionarsi di conseguenza.

Quando inizierai a costruire applicazioni più complesse, scoprirai che anche altri widget contenitore richiedono di impostare un layout di livello superiore, per esempio QGroupBox, QTabWidget, QToolBox e così via. Per fare questo, puoi eseguire gli stessi passi che hai visto qui, ma questa volta hai bisogno di cliccare con il tasto destro del mouse sul widget contenitore.

Impostare un dialogo con Qt Designer

Per un ultimo e più completo esempio di come usare i layout con Qt Designer, ora creeremo un dialogo per introdurre alcune informazioni in un’applicazione database. Supponiamo che stiamo costruendo un software di gestione delle risorse umane per la nostra azienda Poyqote Inc. Ora stiamo lavorando su un modulo per introdurre alcuni dati sui nostri dipendenti. La finestra di dialogo dovrebbe presentare agli utenti una GUI facile da usare per introdurre i seguenti dati:

• Nome del dipendente
• Data di assunzione
• Dipartimento
• Posizione
• Salario annuale
• Descrizione del lavoro

Qual è il modo migliore di presentare questo modulo? Ci sono molte opzioni, ed è in gran parte una questione di gusto e pratica. Ma qui stiamo usando un QFormLayout per disporre i campi di inserimento in due colonne con etichette a sinistra e caselle di input a destra. Il processo di creazione del layout è mostrato nel seguente screencast –

La finestra di dialogo di base è creata utilizzando il modello Dialog with Buttons Bottom di Qt Designer. Poi, aggiungiamo alcune etichette e alcuni widget di input, incluse le modifiche di linea, le modifiche di data, le modifiche di testo e le caselle combinate. Poi mettiamo tutti questi widget in un layout di modulo e infine definiamo un livello superiore o un layout principale per il modulo.

Il file .ui del dialogo finito può essere scaricato qui.

Conclusione

Qt Designer è uno strumento potente quando si tratta di creare GUI usando Qt. Una delle sue caratteristiche più dirette e utili è la capacità di organizzare i tuoi widget in diversi tipi di layout. Imparare come creare efficacemente i layout con Qt Designer può far salire alle stelle la tua produttività, in particolare quando crei GUI complesse.

Questo tutorial ti ha guidato attraverso il processo di creazione di layout personalizzati con Qt Designer. Ora sai come ottenere il massimo da Qt Designer quando crei le tue GUI.