QML Styling/bg: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
(Add "cleanup" tag)
(Convert ExpressionEngine links)
Line 1: Line 1:
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}


'''Български''' [[QmlStyling|English]] [[QmlStyling_Spanish|Spanish]] [[QmlStyling_Italian|Italian]] [[QmlStyling_Hungarian|Magyar]] "French":http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/style/
'''Български''' [[QmlStyling|English]] [[QmlStyling_Spanish|Spanish]] [[QmlStyling_Italian|Italian]] [[QmlStyling_Hungarian|Magyar]] [http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/style/ French]
[toc align_right="yes" depth="3"]
[toc align_right="yes" depth="3"]


Line 10: Line 10:
== Подход 1: Собствен компонент ==
== Подход 1: Собствен компонент ==


QML поддържа дефинирането на "собствени компоненти":http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components. По-долу, ние създаваме собственият компонент '''TitleText''', който можем после да използваме в нашата програма, когато искаме заглавен текст. Ако изкаме да променим външният вид на всички заглавни текстове в нашият интерфейс, можем просто да редактираме ''TitleText.qml'' и промените ще се отразят навсякъде, където е използван.
QML поддържа дефинирането на [http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components собствени компоненти]. По-долу, ние създаваме собственият компонент '''TitleText''', който можем после да използваме в нашата програма, когато искаме заглавен текст. Ако изкаме да променим външният вид на всички заглавни текстове в нашият интерфейс, можем просто да редактираме ''TitleText.qml'' и промените ще се отразят навсякъде, където е използван.


<code>// TitleText.qml
<code>// TitleText.qml

Revision as of 15:16, 4 March 2015

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

Български English Spanish Italian Magyar French [toc align_right="yes" depth="3"]

Създаване на стилове в QML

QML предоставя няколко механизъма за стилизиране на потребителския интерфейс. Представяме ви три често срещани подхода.

Подход 1: Собствен компонент

QML поддържа дефинирането на собствени компоненти. По-долу, ние създаваме собственият компонент TitleText, който можем после да използваме в нашата програма, когато искаме заглавен текст. Ако изкаме да променим външният вид на всички заглавни текстове в нашият интерфейс, можем просто да редактираме TitleText.qml и промените ще се отразят навсякъде, където е използван.

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

// употреба
TitleText {
 text: "Title 1"
}

Подход 2: Допълнителен обект

При този подход, дефинираме Style обект, който съдържа колекцията от свойства, дефиниращи стила. Този обект е инстанциран в главният компонент, така че да е видим в цялото приложение.

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

// главен компонент
Rectangle {
 
 Style { id: style }
 
}

// употреба
Text {
 font.pixelSize: style.textSize
 color: style.textColor
 text: "Hello World"
}

Подход 3: Хибриден (Style обект + собствен компонент )

При този подход, имаме Style обект, който се използва в нашият компонент.

// Style.qml
QtObject {
 property int titleAlignment: Text.AlignHCenter
 property int titleFontSize: 50
 property color titleColor: "green"
}

// главен компонент
Rectangle {
 
 Style { id: style }
 
}

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

// употреба
TitleText {
 text: "Title 1"
}