QML Styling/hu

Magyar English Spanish Italian

Stílustervezés QML-ben

A QML számos módot kínál a felhasználói felület megtervezésére. Alant a három leggyakoribb látható.

1. megközelítés: Egyedi komponensek

A QML támogatja a saját, "egyedi Komponensek":http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components létrehozását. Alant egy TitleText, azaz címszöveg komponenst hozunk létre, melyet később akármikor felhasználhatunk, ha az UI-unknak szüksége van egy címre. Ha meg szeretnénk változtatni az összes címszöveget a felhasználói felületünkön, akkor elég csak a TitleText.qml fájlt módosítani, és a változások életbe is lépnek.

// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: &quot;green&amp;quot;<br />}

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

2. megközelítés: Stílus Objektum

Ezt a megközelítést használva egy Style objektumot definiálunk, amely tartalmazza a stílust meghatározó tulajdonságokat. Ez az objektum a gyökér komponensben kerül példányosításra, így elérhető lesz bárhonnan az alkalmazásunkban.

// Style.qml<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: &quot;green&amp;quot;<br />}

// gyökér komponens<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />}

// felhasználás<br />Text {<br /> font.pixelSize: style.textSize<br /> color: style.textColor<br /> text: &quot;Hello World&amp;quot;<br />}

3. megközelítés: Hibrid (Stílus objektum + egyedi Komponens)

Ennél a módszernél van egy Style objektumunk, melyet a saját egyedi komponensünk fog használni.

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

// gyökér komponens<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 />}

// felhasználás<br />TitleText {<br /> text: &quot;Title 1&amp;quot;<br />}