Български English Spanish Italian Magyar French [qt-devnet.developpez.com]
Table of Content
Създаване на стилове в QML
QML предоставя няколко механизъма за стилизиране на потребителския интерфейс. Представяме ви три често срещани подхода.
Подход 1: Собствен компонент
QML поддържа дефинирането на собствени компоненти [doc.qt.nokia.com]. По-долу, ние създаваме собственият компонент 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"
- }
