Qml Styling: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
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;]
'''English''' [[QmlStyling_Spanish|Spanish]] [[QmlStyling_Italian|Italian]] [[QmlStyling_Hungarian|Magyar]] "French":http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/style/ [[QmlStyling_Bulgarian|Български]]
[toc align_right="yes" depth="3"]


= Styling in QML =
= Styling in QML =
Line 7: Line 8:
== 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 "custom components":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.


<code>// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: &quot;green&amp;quot;<br />}
<code>// TitleText.qml
Text {
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 50
color: "green"
}


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


== Approach 2: Style Singleton ==
== Approach 2: Style Singleton ==
Line 17: Line 26:
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.
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.


<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 />}
<code>// Style.qml
pragma Singleton
import QtQuick 2.0
QtObject {
property int textSize: 20
property color textColor: "green"
}


// qmldir<br />singleton Style Style.qml
// qmldir
singleton Style Style.qml


// in use<br />import QtQuick 2.0<br />import &quot;.&quot; // QTBUG-34418, singletons require explicit import to load qmldir file
// in use
import QtQuick 2.0
import "." // QTBUG-34418, singletons require explicit import to load qmldir file


Text {<br /> font.pixelSize: Style.textSize<br /> color: Style.textColor<br /> text: &quot;Hello World&amp;quot;<br />}</code>
Text {
font.pixelSize: Style.textSize
color: Style.textColor
text: "Hello World"
}</code>


== Approach 3: Hybrid (Style Singleton + Custom Component) ==
== Approach 3: Hybrid (Style Singleton + Custom Component) ==
Line 29: Line 51:
In this approach, we have a '''Style''' singleton that is used by our custom component.
In this approach, we have a '''Style''' singleton that is used by our custom component.


<code>// Style.qml<br />import QtQuick 2.0<br />pragma Singleton
<code>// Style.qml
import QtQuick 2.0
pragma Singleton


QtObject {<br /> property int titleAlignment: Text.AlignHCenter<br /> property int titleFontSize: 50<br /> property color titleColor: &quot;green&amp;quot;<br />}
QtObject {
property int titleAlignment: Text.AlignHCenter
property int titleFontSize: 50
property color titleColor: "green"
}


// TitleText.qml<br />import QtQuick 2.0<br />import &quot;.&quot; // QTBUG-34418, singletons require explicit import to load qmldir file
// TitleText.qml
import QtQuick 2.0
import "." // 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 />}
Text {
horizontalAlignment: Style.titleAlignment
font.pixelSize: Style.titleFontSize
color: Style.titleColor
}


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


== Nesting QtObjects ==
== Nesting QtObjects ==
Line 43: Line 80:
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:


<code>// Style.qml<br />.pragma Singleton
<code>// Style.qml
.pragma Singleton


QtObject {
QtObject {


property QtObject window: QtObject{<br /> property color background: &quot;white&amp;quot;;<br /> }
property QtObject window: QtObject{
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 int normal: 1;
property int big: 3;
}


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 QtObject color: QtObject{
property color normal: "gray";
property color focus: "blue";
property color disabled: "red";
}
}
}</code>

Revision as of 08: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"]

Styling in QML

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

Approach 1: Custom Component

QML supports defining your own "custom components":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.

// 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.

// Style.qml
pragma Singleton
import QtQuick 2.0
QtObject {
 property int textSize: 20
 property color textColor: "green"
}

// qmldir
singleton Style Style.qml

// in use
import QtQuick 2.0
import "." // QTBUG-34418, singletons require explicit import to load qmldir file

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
import QtQuick 2.0
pragma Singleton

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

// TitleText.qml
import QtQuick 2.0
import "." // QTBUG-34418, singletons require explicit import to load qmldir file

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";
 }
 }
}