QML Styling/hu

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.

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
Text {
 horizontalAlignment: Text.AlignHCenter
 font.pixelSize: 50
 color: "green"
}

// in use
TitleText {
 text: "Title 1"
}

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
QtObject {
 property int textSize: 20
 property color textColor: "green"
}

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

// felhasználás
Text {
 font.pixelSize: style.textSize
 color: style.textColor
 text: "Hello World"
}

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
QtObject {
 property int titleAlignment: Text.AlignHCenter
 property int titleFontSize: 50
 property color titleColor: "green"
}

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

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

// felhasználás
TitleText {
 text: "Title 1"
}