QML Styling/hu: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 9: Line 9:
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.
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.


<code>// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: "green"<br />}
<code>// TitleText.qml
Text {
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 50
color: "green"
}


// in use<br />TitleText {<br /> text: "Title 1"<br />}</code>
// in use
TitleText {
text: "Title 1"
}</code>


== 2. megközelítés: Stílus Objektum ==
== 2. megközelítés: Stílus Objektum ==
Line 17: Line 25:
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.


<code>// Style.qml<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: "green"<br />}
<code>// Style.qml
QtObject {
property int textSize: 20
property color textColor: "green"
}


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


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


== 3. megközelítés: Hibrid (Stílus objektum + egyedi Komponens) ==
== 3. megközelítés: Hibrid (Stílus objektum + egyedi Komponens) ==
Line 27: Line 49:
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"<br />}
<code>// Style.qml
QtObject {
property int titleAlignment: Text.AlignHCenter
property int titleFontSize: 50
property color titleColor: "green"
}


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


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


// felhasználás<br />TitleText {<br /> text: "Title 1"<br />}</code>
// felhasználás
TitleText {
text: "Title 1"
}</code>


[[Category:Developing_with_Qt::Qt Quick]]
[[Category:Developing_with_Qt::Qt Quick]]

Revision as of 12:25, 25 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
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"
}