Primi passi con Qt Designer

Questo tutorial richiede che Qt Creator sia installato – puoi scaricarlo gratuitamente dal sito web di Qt. Vai su https://www.qt.io/download e scarica il pacchetto Qt. Puoi scegliere di installare solo Creator durante l’installazione.

Apri Qt Creator e ti verrà presentata la finestra principale. Il designer è disponibile tramite la scheda sul lato sinistro. Tuttavia, per attivarlo devi prima iniziare a creare un file .ui.

L’interfaccia di Qt Creator, con la sezione Design mostrata sulla sinistra.

Per creare un file .ui vai su File -> Nuovo File o Progetto… Nella finestra che appare seleziona Qt sotto Files and Classes sulla sinistra, poi seleziona Qt Designer Form sulla destra. Noterai che l’icona ha “ui”, che mostra il tipo di file che stai creando.

Crea un nuovo file Qt .ui.

Nel prossimo passo ti verrà chiesto che tipo di widget vuoi creare. Se state avviando un’applicazione, allora Main Window è la scelta giusta. Tuttavia, puoi anche creare file .ui per finestre di dialogo, moduli e widget composti personalizzati.

Seleziona il tipo di widget da creare, per la maggior parte delle applicazioni questo sarà Main Window.

Poi scegli un nome di file e una cartella di salvataggio per il tuo file. Salva il tuo file .ui con lo stesso nome della classe che creerai, solo per rendere più semplici i comandi successivi.

Scegli il nome e la cartella di salvataggio del tuo file.

Infine, puoi scegliere di aggiungere il file al tuo sistema di controllo della versione se ne stai usando uno. Sentiti libero di saltare questo passo – non influisce sulla tua UI.

Opzionalmente aggiungi il file al tuo controllo di versione, per esempio Git.

Presenta la tua finestra principale

Ti verrà presentata la finestra principale appena creata nel designer UI. Non c’è molto da vedere all’inizio, solo un’area di lavoro grigia che rappresenta la finestra, insieme all’inizio della barra dei menu della finestra.

La vista iniziale della finestra principale creata.

Puoi ridimensionare la finestra cliccando sulla finestra e trascinando le maniglie blu su ogni angolo.

La vista iniziale della finestra principale creata.

Il primo passo per costruire un’applicazione è aggiungere alcuni widget alla tua finestra. Nelle nostre prime applicazioni abbiamo imparato che per impostare il widget centrale per un QMainWindow dobbiamo usare .setCentralWidget(). Abbiamo anche visto che per aggiungere più widget con un layout, abbiamo bisogno di un QWidget intermedio a cui applicare il layout, piuttosto che aggiungere il layout alla finestra direttamente.

Qt Creator si occupa di questo automaticamente, anche se non è particolarmente ovvio.

Per aggiungere più widget alla finestra principale con un layout, prima trascinate i vostri widget sul QMainWindow. Qui stiamo trascinando 3 etichette. Non importa dove li trascini.

Finestra principale con 1 etichetta e 1 pulsante aggiunti.

Abbiamo creato 2 widget trascinandoli sulla finestra, rendendoli figli di quella finestra. Ora possiamo applicare un layout.

Trova il QMainWindow nel pannello di destra (dovrebbe essere proprio in cima). Sotto si vede centralwidget che rappresenta il widget centrale della finestra. L’icona del widget centrale mostra il layout correntemente applicato. Inizialmente ha un cerchio-croce rosso che lo attraversa, mostrando che non c’è nessun layout attivo.

Fai clic destro sull’oggetto QMainWindow, e trova ‘Layout’ nel dropdown risultante.

Fai clic destro sulla finestra principale, e scegli layout.

Poi vedrai una lista di layout che puoi applicare alla finestra. Seleziona Lay Out Horizontally e il layout verrà applicato al widget.

Seleziona il layout da applicare alla finestra principale.

Il layout selezionato viene applicato al widget centrale del QMainWindow e i widget vengono aggiunti al layout, essendo disposti secondo il layout selezionato. Nota che in Qt Creator puoi effettivamente trascinare e riordinare i widget all’interno del layout, o selezionare un layout diverso, come preferisci. Questo lo rende particolarmente utile per la prototipazione e per provare le cose.

La disposizione verticale applicata ai widget nella finestra principale.

Utilizzando il file .ui generato

Abbiamo creato una UI molto semplice. Il prossimo passo è portarla in Python e usarla per costruire un’applicazione funzionante.

Prima salva il tuo file .ui – per default verrà salvato nella posizione che hai scelto durante la sua creazione, sebbene tu possa scegliere un’altra posizione se vuoi.

Il file .ui è in formato XML. Per usare la nostra UI da Python abbiamo due metodi alternativi disponibili –

1. caricarla in una classe usando il metodo .loadUI()
2. convertirla in Python usando lo strumento pyuic5.

Questi due approcci sono trattati di seguito. Personalmente preferisco convertire l’UI in un file Python per mantenere le cose simili dal punto di vista della programmazione &pacchetto.

Caricare il file .ui direttamente

Per caricare file .ui possiamo usare il modulo uic incluso in PyQt5, in particolare il metodo uic.loadUI(). Questo prende il nome di un file UI e lo carica creando un oggetto PyQt5 completamente funzionale.

Per PySide2 puoi usare un’istanza QUiLoader e chiamare il metodo loader.load() per fare la stessa cosa.

Una (molto) semplice UI progettata in Qt Creator

Poiché il metodo uid.loadUI() trasforma un oggetto istanza non puoi allegare codice personalizzato __init__(). Puoi comunque gestire questo attraverso una funzione di configurazione personalizzata

Per caricare una UI dal blocco __init__ di un widget esistente (ad esempio un QMainWindow) puoi usare uic.loadUI(filename, self) per PyQt5.

Il caricatore di PySide2 non supporta questo approccio – il secondo parametro è per il widget padre del widget che stai creando. Questo ti impedisce di aggiungere codice personalizzato all’inizializzazione del widget, ma puoi aggirarlo con una funzione init separata.

Convertire il tuo file .ui in Python

Per generare un file di output Python esegui pyuic5 dalla riga di comando, passando il file .ui e il file di destinazione dell’output, con un parametro -o. Il seguente genererà un file Python chiamato MainWindow.py che contiene la nostra UI creata.

pyuic5 mainwindow.ui -o MainWindow.py

Se stai usando PyQt4 lo strumento si chiama `pyuic4`, ma è completamente identico.

Puoi aprire il file MainWindow.py risultante in un editor per dare un’occhiata, anche se non dovresti modificare questo file. Il potere di usare Qt Creator è quello di essere in grado di modificare, ritoccare e aggiornare la tua applicazione mentre sviluppi. Qualsiasi modifica fatta a questo file sarà persa quando lo aggiorni. Tuttavia, puoi sovrascrivere e modificare qualsiasi cosa ti piaccia quando importi e usi il file nelle tue applicazioni.

Importare il file Python risultante funziona come per qualsiasi altro. Potete importare la vostra classe come segue. Lo strumento pyuic5 aggiunge Ui_ al nome dell’oggetto definito in Qt Creator, ed è questo oggetto che volete importare.

from MainWindow import Ui_MainWindow

Per creare la finestra principale nella vostra applicazione, create una classe come al solito, ma sottoclassando sia QMainWindow che la vostra classe importata Ui_MainWindow. Infine, chiamate self.setupUi(self) dall’interno della __init__ per attivare la configurazione dell’interfaccia.

Questo produce esattamente lo stesso risultato di prima.

Una (molto) semplice interfaccia utente progettata in Qt Creator

Ecco fatto. La vostra finestra è ora completamente impostata. Poiché l’uso di un file .ui astrae il codice specifico dell’interfaccia utente, puoi usare questo stesso schema per caricare qualsiasi interfaccia che disegni.

Aggiungere la logica dell’applicazione

Puoi interagire con i widget creati attraverso Qt Creator proprio come faresti con quelli creati con il codice. Per rendere le cose più semplici uicaggiunge tutti i widget figli all’oggetto finestra per il loro nome id come specificato in Qt Creator. Tratteremo come lavorare con questi nella prossima parte.