QML Styling/hu: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 7: Line 7:
== 1. megközelítés: Egyedi komponensek ==
== 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.
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: &quot;green&amp;quot;<br />}
<code>// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: "green"<br />}


// in use<br />TitleText {<br /> text: &quot;Title 1&amp;quot;<br />}</code>
// in use<br />TitleText {<br /> text: "Title 1"<br />}</code>


== 2. megközelítés: Stílus Objektum ==
== 2. megközelítés: Stílus Objektum ==
Line 17: Line 17:
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: &quot;green&amp;quot;<br />}
<code>// Style.qml<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: "green"<br />}


// gyökér komponens<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<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: &quot;Hello World&amp;quot;<br />}</code>
// felhasználás<br />Text {<br /> font.pixelSize: style.textSize<br /> color: style.textColor<br /> text: "Hello World"<br />}</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 27:
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: &quot;green&amp;quot;<br />}
<code>// Style.qml<br />QtObject {<br /> property int titleAlignment: Text.AlignHCenter<br /> property int titleFontSize: 50<br /> property color titleColor: "green"<br />}


// gyökér komponens<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />}
// gyökér komponens<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />}
Line 33: Line 33:
// TitleText.qml<br />Text {<br /> horizontalAlignment: style.titleAlignment<br /> font.pixelSize: style.titleFontSize<br /> color: style.titleColor<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: &quot;Title 1&amp;quot;<br />}</code>
// felhasználás<br />TitleText {<br /> text: "Title 1"<br />}</code>


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

Revision as of 06:49, 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<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: "green"<br />}

// in use<br />TitleText {<br /> text: "Title 1"<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"<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"<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"<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"<br />}