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<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: &quot;green&amp;quot;<br />}

// in uso<br />TitleText {<br /> text: &quot;Title 1&amp;quot;<br />}

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<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: &quot;green&amp;quot;<br />}

// componente principale<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />}

// in use<br />Text {<br /> font.pixelSize: style.textSize<br /> color: style.textColor<br /> text: &quot;Hello World&amp;quot;<br />}

Approccio 3: Ibrido (Oggetto di stile + Componente personalizzato)

In questo approccio, abbiamo un oggetto Style che è usato in un componente personalizzato.

// Style.qml<br />QtObject {<br /> property int titleAlignment: Text.AlignHCenter<br /> property int titleFontSize: 50<br /> property color titleColor: &quot;green&amp;quot;<br />}

// componente principale<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />}

// TitleText.qml<br />Text {<br /> horizontalAlignment: style.titleAlignment<br /> font.pixelSize: style.titleFontSize<br /> color: style.titleColor<br />}

// in uso<br />TitleText {<br /> text: &quot;Title 1&amp;quot;<br />}