QML Styling/it

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

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. 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"
}