Progress Bar Circolare

Obiettivo di questo tutorial Qt Quick è la realizzazione di un “custom widget” in QML per la visualizzazione di una progress bar circolare che assuma valori da 0 a 100. A lato è visibile l’aspetto grafico di questo widget che chiameremo ProgressBarCircolare.

Primo passo: creare un nuovo progetto di Qt Creator

Per prima cosa occorre creare un nuovo progetto con Qt Creator (Menu File >> New File or Project). Tra i modelli (template) a nostra disposizione, visibili in figura, selezioniamo Qt Quick Application.

Il progetto si presenterà così:

Ciò che occorre fare ora è sostituire il codice QML dei files main.qml e MainForm.ui.qml. al posto del Mainform andremo a scrivere il codice del nostro custom widget. MainForm.ui.qml verrà rinominato in ProgressBarCircolare.ui.qml in modo tale da poter usare il nome ProgressBarCircolare come nome del componente all’interno di main.qml.

Vediamo ora il codice: main.qml

La nostra applicazione è quindi una Window di dimensioni 150×130 pixel con un colore di background #192324 ed avente titolo Progress Bar Circolare. All’interno della Window trovano posto la ProgressBarCircolare ed un Slider che ci servirà per cambiare valore alla progress bar e vedere così il risultato finale. Analizziamo ora la ProgressBarCircolare istanziata nel file main.qml. Essa è caratterizzata da un id: progressbar, un’ampiezza pari all’ampiezza dell’item padre (width:parent.width), un’altezza di 100 pixel e verrà posizionata in modo assoluto ad un’altezza data dal punto y:10. Successivamente troviamo lo slider avente come identificativo il nome sliderHorizontal che verrà ancorato nel suo punto in alto alle coordinate date dal fondo della progressbar (anchors.top:progressBar.bottom). Come si può osservare, l’id progressBar ci è servito per poter referenziarne una proprietà utile al posizionamento di un altro item QML. Successivamente il nostro slider verrà ridimensionato con ampiezza pari a quella della window che lo contiene (width:parent.width), avrà un’altezza di 20 pixel e assumerà i valori da 0 a 100 in corrispondenza dei suoi estremi. Al termine vediamo l’istruzione onValueChanged: progressBar.value=value; che rappresenta il modo con cui lo slider “comunica” le sue variazioni di valore alla progress bar. Questa sintassi verrà tradotta dal motore QML in una connessione tra il signal generato dallo slider e lo slot di impostazione del valore della progress bar.

ed infine ProgressBarCircolare.ui.qml

La spiegazione del codice sopra riportato è ancora in corso e verrà completata nel giro di pochi giorni. Poichè questo è il primo tutorial realizzato con il nuovo CMS, Qt Italia chiede ai lettori qualsiasi tipo di feedback per capire se il “format” è di facile comprensione. Il codice sorgente è disponibile sul repository GitHub di Qt Italia. Per qualsiasi commento potete comunicare tramite la pagina Contattaci. Grazie