QML Styling/hu: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
'''Magyar''' [[QmlStyling|English]] [[ | '''Magyar''' [[QmlStyling|English]] [[QmlStyling_Spanish|Spanish]] [[QmlStyling_Italian|Italian]] | ||
=Stílustervezés | = Stílustervezés QML-ben = | ||
A | 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== | == 1. megközelítés: Egyedi komponensek == | ||
A | 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. | ||
==2. megközelítés: Stílus Objektum== | <code>// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: "green&quot;<br />} | ||
// in use<br />TitleText {<br /> text: "Title 1&quot;<br />}</code> | |||
== 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. | 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. | ||
==3. megközelítés: Hibrid (Stílus objektum + egyedi Komponens)== | <code>// Style.qml<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: "green&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: "Hello World&quot;<br />}</code> | |||
== 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. | Ennél a módszernél van egy '''Style''' objektumunk, melyet a saját egyedi komponensünk fog használni. | ||
<code>// Style.qml<br />QtObject {<br /> property int titleAlignment: Text.AlignHCenter<br /> property int titleFontSize: 50<br /> property color titleColor: "green&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: "Title 1&quot;<br />}</code> | |||
[[Category:Developing_with_Qt::Qt Quick]] | |||
Revision as of 06:33, 24 February 2015
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: "green&quot;<br />}
// in use<br />TitleText {<br /> text: "Title 1&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: "green&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: "Hello World&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: "green&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: "Title 1&quot;<br />}