English Spanish Italiano Magyar
Table of Content
Abbellimenti in QML
QML fornisce diversi meccanismi per l’abbellimento di un’interfaccia utente. Qui di seguito sono elencati tre approcci comuni.
Approccio 1: Componente Personalizzato
QML supporta la definizione di propri componenti personalizzati [doc.qt.nokia.com]. Di seguito, creiamo un componente personalizzato TitleText che possiamo utilizzare ogni volta che la nostra interfaccia utente richiede un titolo. Se vogliamo cambiare l’aspetto di tutti i titoli della nostra interfaccia utente, possiamo editare TitleText.qml, e le modifiche si applicheranno ovunque esso venga utilizzato.
- // TitleText.qml
- Text {
- horizontalAlignment: Text.AlignHCenter
- font.pixelSize: 50
- color: "green"
- }
- // in uso
- TitleText {
- text: "Title 1"
- }
Approccio 2: Oggetto di stile
In questo approccio definiamo un oggetto Style che contenga la definizione delle proprietà dello stile. Questo oggetto è istanziato nel componente principale, per cui è disponibile in tutta l’applicazione.
- // Style.qml
- QtObject {
- property int textSize: 20
- property color textColor: "green"
- }
- // componente principale
- Rectangle {
- ...
- Style { id: style }
- ...
- }
- // in use
- Text {
- font.pixelSize: style.textSize
- color: style.textColor
- text: "Hello World"
- }
Approccio 3: Ibrido (Oggetto di stile + Componente personalizzato)
In questo approccio, abbiamo un oggetto Style che è usato in un componente personalizzato.
- // Style.qml
- QtObject {
- property int titleAlignment: Text.AlignHCenter
- property int titleFontSize: 50
- property color titleColor: "green"
- }
- // componente principale
- Rectangle {
- ...
- Style { id: style }
- ...
- }
- // TitleText.qml
- Text {
- horizontalAlignment: style.titleAlignment
- font.pixelSize: style.titleFontSize
- color: style.titleColor
- }
- // in uso
- TitleText {
- text: "Title 1"
- }
