Componenti Qt QML

Oltre ai componenti AppStudio QML disponibili per progettare l'interfaccia utente dell'app, è possibile accedere anche a tutti i componenti QMLdi proprietà di The Qt Company. In questa sezione sono descritti i componenti più utili. Per un elenco completo dei tipi Qt QML, consultare la documentazione Qt.

Quelli che seguono, sono alcuni dei tipi di QML più utilizzati:

• Posizionatori
• Ancore
• Layout
• ripetitori
• Stati
• Connessioni

Attenzione:

Differenze sono state osservate nella visualizzazione degli elementi dell'interfaccia utente (IU) nelle app e nei campioni di AppStudio durante la migrazione da Qt 5.13.1 a Qt 5.15.2. Alcune differenze includono posizione, dimensione, layout, colore, ritaglio, ritorno a capo e tipo di carattere. Verificare la visualizzazione di tutti gli elementi IU delle app. In alcuni casi, potrebbe essere necessario cambiare l'annidamento dei componenti; in altri casi, potrebbe essere necessario definire ulteriori o minori proprietà. Dal momento che c'è molta flessibilità nel modo in cui gli elementi dell'IU vengono definiti in QML, non ci sono regole impostate.

Nella versione 5.15.2, i tipi di proprietà di Qt, ad esempio bool, string e int sono rigorosi e non supportano più valori null o indefiniti. Se l'app utilizza questi tipi, è necessario considerare come supportare i valori null o indefiniti. In alternativa, è possibile utilizzare il tipo di proprietà var, che consente i valori null e indefinititi, ma anche tutti gli altri valori possibili.

Posizionatori

I posizionatori sono elementi contenitori che gestiscono le posizioni degli elementi nell'interfaccia utente. I tipi di posizionatori includono riga, colonna, griglia e flusso. Organizzando gli elementi in base a questi tipi è possibile ordinarli in un layout regolare idoneo a interfacce utente ridimensionabili. Ad esempio, organizzando gli elementi in una griglia, quando si visualizza l'app con orientamento verticale è possibile vedere una matrice di elementi di due per cinque, mentre passando all'orientamento orizzontale la griglia di elementi si riorganizza automaticamente per adattarsi allo schermo, mostrando così una matrice di elementi di tre per quattro.

Per ulteriori informazioni sui posizionatori, consultare la documentazione Qt.

Ancore

Ciascun elemento dispone di sette punti di ancoraggio e gli altri elementi possono essere posizionati in funzione di tali punti, che sono alto, basso, sinistra, destra, centro orizzontale, centro verticale e linea di base (la linea su cui è collocato il testo all'interno dell'elemento). Questa funzione è ideale per posizionare elementi l'uno in funzione dell'altro e creare così interfacce utente dinamiche. Le ancore sono conservate anche laddove cambino le dimensioni o le ubicazioni degli elementi. È inoltre possibile definire i margini delle ancore, specificando quanto spazio deve essere lasciato fuori da un'ancora dell'elemento.

Per ulteriori informazioni sulle ancore, consultare la documentazione Qt.

Layout

Per utilizzare i layout rapidi di Qt, occorre riferire un ulteriore modulo nel file QML, ad esempio:

import QtQuick.Layouts 1.15

i tre layout sono RowLayout, ColumnLayout e GridLayout. Rispetto a righe, colonne e griglie, i layout consentono di avere un controllo più preciso sul posizionamento dell'elemento. Ciò include la possibilità di specificare l'allineamento di ciascun elemento nel layout. I GridLayout consentono anche di impostare una spaziatura diversa per colonne e righe, di estendere gli elementi in righe e colonne e specificare una singola cella per un determinato elemento. I layout possono inoltre essere impiegati per impostare le preferenze di larghezza e altezza massime, nonché di impostarle per ciascun elemento. Ciò risulta particolarmente utile durante la progettazione di display dinamici o di più display. I layout possono essere riflessi; un layout con orientamento sinistra/destra può quindi essere trasformato in un layout destra/sinistra.

ripetitori

Un ripetitore crea elementi per poi utilizzarli con i posizionatori avvalendosi dei dati di un modello. La combinazione di ripetitori e posizionatori costituisce un metodo efficace per disporre gli elementi. Un modello può essere uno dei seguenti:

• Numero indicante la quantità di elementi che il ripetitore deve creare
• Origine dati con elenco a modulo libero, un modello di elenco
• Elenco stringhe
• Elenco oggetti

Il delegato fornisce un modello che definisce ciascun elemento creato dal ripetitore. Un delegato del ripetitore può accedere al suo indice nel ripetitore e ai dati del modello rilevanti per il delegato.

Per ulteriori informazioni sui ripetitori, consultare la documentazione Qt.

Stati

È possibile utilizzare gli stati per mostrare una vista o una schermata diversa all'interno di un'app. Essi consentono di mostrare o nascondere elementi in base al valore di una proprietà, di modificare l'ancoraggio o di cambiare gli oggetti padre. In base allo stato, è possibile avviare, arrestare o sospendere le animazioni o eseguire gli script. Ciascun componente basato sugli elementi è dotato di una proprietà di stato e di uno stato predefinito. Lo stato predefinito è la stringa vuota ("") e contiene solo i valori iniziali della proprietà. Se si imposta la proprietà di stato su una stringa vuota, viene caricato lo stato predefinito.

Per ulteriori informazioni sugli stati, consultare la documentazione Qt.

Connessioni

In Qt 5.15, c'è una nuova sintassi per le connessioni. Il metodo precedente relativo alla creazione di un handler on<Signal> è deprecato e ora dovrebbe essere seguita la sintassi della funzione. Quello che segue è un messaggio di avviso che si riceverà quando si esegue un'applicazione utilizzando la sintassi di connessione precedente:

qrc:/qml/main.qml:277:5: QML Connections: Implicitly defined onFoo properties in Connections are deprecated. Use this syntax instead: function onFoo (<arguments>) { ... }

Il seguente esempio mostra come una connessione è stata tipicamente definita in Qt 5.13 e versioni precedenti:

Connections { 
     target: mouseArea 
     onPositionChanged: { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     onPressedChanged: { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

Il seguente esempio mostra come una connessione dovrebbe essere definita in Qt 5.15 e versioni successive:

Connections { 
     target: mouseArea 
     function onPositionChanged(mouse) { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     function onPressedChanged() { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

Ora che si utilizza la sintassi della funzione, è necessario garantire che tutti i parametri di segnale siano elencati esplicitamente. Se si omettono, i parametri del segnale non saranno disponibili con il loro nome e ciò potrebbe condurre a riferimenti non definiti nel codice. Ad esempio, è necessario utilizzare function onPositionChanged(mouse) anziché onPositionChanged.

Quando si elencano i parametri del segnale, si consiglia di elencare tutti i parametri nell'ordine corretto utilizzando nomi formali dei parametri del segnale come nomi dei parametri della funzione. Ad esempio, utilizzare function onPositionChanged(mouse) e non function onPositionChanged(m).

Se il segnale è per un cambiamento di proprietà, è necessario nominare esplicitamente l'oggetto per accedere alla proprietà. Ad esempio, è necessario utilizzare mouseArea.pressed e non pressed.

Per ulteriori informazioni sulle connessioni, consultare la documentazione Qt.