Qml Styling: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(the mentioned bug is already resolved, the import is not necessary now (tested in 5.15))
 
(10 intermediate revisions by 7 users not shown)
Line 1: Line 1:
'''English''' [[QmlStyling_Spanish|Spanish]] [[QmlStyling_Italian|Italian]] [[QmlStyling_Hungarian|Magyar]] &quot;French&amp;quot;:http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/style/ [[QmlStyling_Bulgarian|Български]]<br />[toc align_right=&quot;yes&amp;quot; depth=&quot;3&amp;quot;]
{{LangSwitch}}
 
= Styling in QML =


QML provides several mechanisms for styling a UI. Below are three common approaches.
QML provides several mechanisms for styling a UI. Below are three common approaches.


== Approach 1: Custom Component ==
==Approach 1: Custom Component==


QML supports defining your own &quot;custom components&amp;quot;:http://doc.qt.io/qt-5/qtqml-referenceexamples-properties-example.html. Below, we create a custom component '''TitleText''' that we can use whenever our UI requires a title. If we want to change the appearance of all the titles in our UI, we can then just edit ''TitleText.qml'', and the changes will apply wherever it is used.
QML supports defining your own [http://doc.qt.io/qt-5/qtqml-referenceexamples-properties-example.html custom components]. Below, we create a custom component '''TitleText''' that we can use whenever our UI requires a title. If we want to change the appearance of all the titles in our UI, we can then just edit ''TitleText.qml'', and the changes will apply wherever it is used.<syntaxhighlight lang="qml">
// TitleText.qml
Text {
    horizontalAlignment: Text.AlignHCenter
    font.pixelSize: 50
    color: "green"
}
</syntaxhighlight><syntaxhighlight lang="qml">
// In use
TitleText {
    text: "Title 1"
}
</syntaxhighlight>


<code>// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: &quot;green&amp;quot;<br />}
==Approach 2: Style Singleton==


// in use<br />TitleText {<br /> text: &quot;Title 1&amp;quot;<br />}</code>
In this approach we define a '''Style''' QML singleton object that contains a collection of properties defining the style. As a QML singleton, a common instance can be access from anywhere which imports this directory. Note that QML singletons require a qmldir file with the '''singleton''' keyword preceding the Style type declaration; they cannot be picked up implicitly like other types. When using Qrc resources both the Style.qml and the qmldir file must be included in the .qrc resource file.<syntaxhighlight lang="qml">
// Style.qml
pragma Singleton
import QtQuick 2.0


== Approach 2: Style Singleton ==
QtObject {
    property int textSize: 20
    property color textColor: "green"
}
</syntaxhighlight><syntaxhighlight lang="qml">
// In use
import QtQuick 2.0


In this approach we define a '''Style''' QML singleton object that contains a collection of properties defining the style. As a QML singleton, a common instance can be access from anywhere which imports this directory. Note that QML singletons require a qmldir file with the '''singleton''' keyword preceding the Style type declaration; they cannot be picked up implicitly like other types.
Text {
    font.pixelSize: Style.textSize
    color: Style.textColor
    text: "Hello World"
}
</syntaxhighlight>


<code>// Style.qml<br />pragma Singleton<br />import QtQuick 2.0<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: &quot;green&amp;quot;<br />}
==Approach 3: Hybrid (Style Singleton + Custom Component)==


// qmldir<br />singleton Style Style.qml
In this approach, we have a '''Style''' singleton that is used by our custom component.<syntaxhighlight lang="qml">
// Style.qml
pragma Singleton
import QtQuick 2.0


// in use<br />import QtQuick 2.0<br />import &quot;.&quot; // QTBUG-34418, singletons require explicit import to load qmldir file
QtObject {
 
    property int titleAlignment: Text.AlignHCenter
Text {<br /> font.pixelSize: Style.textSize<br /> color: Style.textColor<br /> text: &quot;Hello World&amp;quot;<br />}</code>
    property int titleFontSize: 50
 
    property color titleColor: "green"
== Approach 3: Hybrid (Style Singleton + Custom Component) ==
}
 
</syntaxhighlight><syntaxhighlight lang="qml">
In this approach, we have a '''Style''' singleton that is used by our custom component.
// TitleText.qml
 
import QtQuick 2.0
<code>// Style.qml<br />import QtQuick 2.0<br />pragma Singleton
 
QtObject {<br /> property int titleAlignment: Text.AlignHCenter<br /> property int titleFontSize: 50<br /> property color titleColor: &quot;green&amp;quot;<br />}
 
// TitleText.qml<br />import QtQuick 2.0<br />import &quot;.&quot; // QTBUG-34418, singletons require explicit import to load qmldir file
 
Text {<br /> horizontalAlignment: Style.titleAlignment<br /> font.pixelSize: Style.titleFontSize<br /> color: Style.titleColor<br />}


// in use<br />TitleText {<br /> text: &quot;Title 1&amp;quot;<br />}</code>
Text {
    horizontalAlignment: Style.titleAlignment
    font.pixelSize: Style.titleFontSize
    color: Style.titleColor
}
</syntaxhighlight><syntaxhighlight lang="qml">
// In use
TitleText {
    text: "Title 1"
}  
</syntaxhighlight>


== Nesting QtObjects ==
==Nesting QtObjects==


If you need to nest QtObject to access more defined properties (i.e. border.width.normal) you can do the following:
If you need to nest QtObject to access more defined properties (i.e. border.width.normal) you can do the following:<syntaxhighlight lang="qml">
 
// Style.qml
<code>// Style.qml<br />.pragma Singleton
pragma Singleton


QtObject {
QtObject {
 
    property QtObject window: QtObject {
property QtObject window: QtObject{<br /> property color background: &quot;white&amp;quot;;<br /> }
        property color background: "white"
 
    }
property QtObject border: QtObject{<br /> property QtObject width: QtObject{<br /> property int normal: 1;<br /> property int big: 3;<br /> }
    property QtObject border: QtObject {
 
        property QtObject width: QtObject {
property QtObject color: QtObject{<br /> property color normal: &quot;gray&amp;quot;;<br /> property color focus: &quot;blue&amp;quot;;<br /> property color disabled: &quot;red&amp;quot;;<br /> }<br /> }<br />}</code>
            property int normal: 1
            property int big: 3
        }
        property QtObject color: QtObject {
            property color normal: "gray"
            property color focus: "blue"
            property color disabled: "red"
        }
    }
}  
</syntaxhighlight>

Latest revision as of 17:28, 5 October 2021

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

QML provides several mechanisms for styling a UI. Below are three common approaches.

Approach 1: Custom Component

QML supports defining your own custom components. Below, we create a custom component TitleText that we can use whenever our UI requires a title. If we want to change the appearance of all the titles in our UI, we can then just edit TitleText.qml, and the changes will apply wherever it is used.

// TitleText.qml
Text {
    horizontalAlignment: Text.AlignHCenter
    font.pixelSize: 50
    color: "green"
}
// In use
TitleText {
    text: "Title 1"
}

Approach 2: Style Singleton

In this approach we define a Style QML singleton object that contains a collection of properties defining the style. As a QML singleton, a common instance can be access from anywhere which imports this directory. Note that QML singletons require a qmldir file with the singleton keyword preceding the Style type declaration; they cannot be picked up implicitly like other types. When using Qrc resources both the Style.qml and the qmldir file must be included in the .qrc resource file.

// Style.qml
pragma Singleton
import QtQuick 2.0

QtObject {
    property int textSize: 20
    property color textColor: "green"
}
// In use
import QtQuick 2.0

Text {
    font.pixelSize: Style.textSize
    color: Style.textColor
    text: "Hello World"
}

Approach 3: Hybrid (Style Singleton + Custom Component)

In this approach, we have a Style singleton that is used by our custom component.

// Style.qml
pragma Singleton
import QtQuick 2.0

QtObject {
    property int titleAlignment: Text.AlignHCenter
    property int titleFontSize: 50
    property color titleColor: "green"
}
// TitleText.qml
import QtQuick 2.0

Text {
    horizontalAlignment: Style.titleAlignment
    font.pixelSize: Style.titleFontSize
    color: Style.titleColor
}
// In use
TitleText {
    text: "Title 1"
}

Nesting QtObjects

If you need to nest QtObject to access more defined properties (i.e. border.width.normal) you can do the following:

// Style.qml
pragma Singleton

QtObject {
    property QtObject window: QtObject {
        property color background: "white"
    }
    property QtObject border: QtObject {
        property QtObject width: QtObject {
            property int normal: 1
            property int big: 3
        }
        property QtObject color: QtObject {
            property color normal: "gray"
            property color focus: "blue"
            property color disabled: "red"
        }
    }
}