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