QML Styling/it

English Spanish Italiano Magyar [toc align_right="yes" depth="3"]

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":http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components. 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"
}