QML Styling/bg: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
'''Български''' [[QmlStyling|English]] [[QmlStyling_Spanish|Spanish]] [[QmlStyling_Italian|Italian]] [[QmlStyling_Hungarian|Magyar]] | '''Български''' [[QmlStyling|English]] [[QmlStyling_Spanish|Spanish]] [[QmlStyling_Italian|Italian]] [[QmlStyling_Hungarian|Magyar]] "French":http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/style/<br />[toc align_right="yes" depth="3"] | ||
= Създаване на стилове в QML = | = Създаване на стилове в QML = | ||
| Line 7: | Line 7: | ||
== Подход 1: Собствен компонент == | == Подход 1: Собствен компонент == | ||
QML поддържа дефинирането на | QML поддържа дефинирането на "собствени компоненти":http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components. По-долу, ние създаваме собственият компонент '''TitleText''', който можем после да използваме в нашата програма, когато искаме заглавен текст. Ако изкаме да променим външният вид на всички заглавни текстове в нашият интерфейс, можем просто да редактираме ''TitleText.qml'' и промените ще се отразят навсякъде, където е използван. | ||
<code>// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: | <code>// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: "green"<br />} | ||
// употреба<br />TitleText {<br /> text: | // употреба<br />TitleText {<br /> text: "Title 1"<br />}</code> | ||
== Подход 2: Допълнителен обект == | == Подход 2: Допълнителен обект == | ||
| Line 17: | Line 17: | ||
При този подход, дефинираме '''Style''' обект, който съдържа колекцията от свойства, дефиниращи стила. Този обект е инстанциран в главният компонент, така че да е видим в цялото приложение. | При този подход, дефинираме '''Style''' обект, който съдържа колекцията от свойства, дефиниращи стила. Този обект е инстанциран в главният компонент, така че да е видим в цялото приложение. | ||
<code>// Style.qml<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: | <code>// Style.qml<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: "green"<br />} | ||
// главен компонент<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />} | // главен компонент<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />} | ||
// употреба<br />Text {<br /> font.pixelSize: style.textSize<br /> color: style.textColor<br /> text: | // употреба<br />Text {<br /> font.pixelSize: style.textSize<br /> color: style.textColor<br /> text: "Hello World"<br />}</code> | ||
== Подход 3: Хибриден (Style обект + собствен компонент ) == | == Подход 3: Хибриден (Style обект + собствен компонент ) == | ||
| Line 27: | Line 27: | ||
При този подход, имаме '''Style''' обект, който се използва в нашият компонент. | При този подход, имаме '''Style''' обект, който се използва в нашият компонент. | ||
<code>// Style.qml<br />QtObject {<br /> property int titleAlignment: Text.AlignHCenter<br /> property int titleFontSize: 50<br /> property color titleColor: | <code>// Style.qml<br />QtObject {<br /> property int titleAlignment: Text.AlignHCenter<br /> property int titleFontSize: 50<br /> property color titleColor: "green"<br />} | ||
// главен компонент<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />} | // главен компонент<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 />} | ||
// употреба<br />TitleText {<br /> text: | // употреба<br />TitleText {<br /> text: "Title 1"<br />}</code> | ||
Revision as of 06:46, 25 February 2015
Български English Spanish Italian Magyar "French":http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/style/
[toc align_right="yes" depth="3"]
Създаване на стилове в QML
QML предоставя няколко механизъма за стилизиране на потребителския интерфейс. Представяме ви три често срещани подхода.
Подход 1: Собствен компонент
QML поддържа дефинирането на "собствени компоненти":http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components. По-долу, ние създаваме собственият компонент TitleText, който можем после да използваме в нашата програма, когато искаме заглавен текст. Ако изкаме да променим външният вид на всички заглавни текстове в нашият интерфейс, можем просто да редактираме TitleText.qml и промените ще се отразят навсякъде, където е използван.
// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: "green"<br />}
// употреба<br />TitleText {<br /> text: "Title 1"<br />}
Подход 2: Допълнителен обект
При този подход, дефинираме Style обект, който съдържа колекцията от свойства, дефиниращи стила. Този обект е инстанциран в главният компонент, така че да е видим в цялото приложение.
// Style.qml<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: "green"<br />}
// главен компонент<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />}
// употреба<br />Text {<br /> font.pixelSize: style.textSize<br /> color: style.textColor<br /> text: "Hello World"<br />}
Подход 3: Хибриден (Style обект + собствен компонент )
При този подход, имаме Style обект, който се използва в нашият компонент.
// Style.qml<br />QtObject {<br /> property int titleAlignment: Text.AlignHCenter<br /> property int titleFontSize: 50<br /> property color titleColor: "green"<br />}
// главен компонент<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 />}
// употреба<br />TitleText {<br /> text: "Title 1"<br />}