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 [doc.qt.nokia.com] 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"
- }
