Difference between revisions of "Qml Styling"

From Qt Wiki
Jump to: navigation, search
 
Line 1: Line 1:
'''English''' [[QmlStyling Spanish|Spanish]] [[QmlStyling Italian|Italian]] [[QmlStyling Hungarian|Magyar]] [http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/style/ French] ''[qt-devnet.developpez.com]'' [[QmlStyling Bulgarian|Български]]<br />
+
'''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;]
  
=Styling in <span class="caps">QML</span>=
+
= Styling in QML =
  
<span class="caps">QML</span> 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 ==
  
<span class="caps">QML</span> supports defining your own [http://doc.qt.io/qt-5/qtqml-referenceexamples-properties-example.html custom components] ''[qt.io]''. 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 &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.
  
==Approach 2: Style Singleton==
+
<code>// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: &quot;green&amp;quot;<br />}
  
In this approach we define a '''Style''' <span class="caps">QML</span> singleton object that contains a collection of properties defining the style. As a <span class="caps">QML</span> singleton, a common instance can be access from anywhere which imports this directory. Note that <span class="caps">QML</span> singletons require a qmldir file with the '''singleton''' keyword preceding the Style type declaration; they cannot be picked up implicitly like other types.
+
// in use<br />TitleText {<br /> text: &quot;Title 1&amp;quot;<br />}</code>
  
==Approach 3: Hybrid (Style Singleton + Custom Component)==
+
== 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.
 +
 
 +
<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 />}
 +
 
 +
// qmldir<br />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
 +
 
 +
Text {<br /> font.pixelSize: Style.textSize<br /> color: Style.textColor<br /> text: &quot;Hello World&amp;quot;<br />}</code>
 +
 
 +
== Approach 3: Hybrid (Style Singleton + Custom Component) ==
  
 
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.
  
==Nesting QtObjects==
+
<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>
 +
 
 +
== 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:
  
===Categories:===
+
<code>// Style.qml<br />.pragma Singleton
 +
 
 +
QtObject {
 +
 
 +
property QtObject window: QtObject{<br /> property color background: &quot;white&amp;quot;;<br /> }
 +
 
 +
property QtObject border: QtObject{<br /> property QtObject width: QtObject{<br /> property int normal: 1;<br /> property int big: 3;<br /> }
  
* [[:Category:Developing with Qt|Developing_with_Qt]]
+
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>
** [[:Category:Developing with Qt::Qt-Quick|Qt Quick]]
 

Revision as of 14:22, 23 February 2015

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

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

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

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

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<br />pragma Singleton<br />import QtQuick 2.0<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: &quot;green&amp;quot;<br />}

// qmldir<br />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

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

Approach 3: Hybrid (Style Singleton + Custom Component)

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

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

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<br />.pragma Singleton

QtObject {

property QtObject window: QtObject{<br /> property color background: &quot;white&amp;quot;;<br /> }

property QtObject border: QtObject{<br /> property QtObject width: QtObject{<br /> property int normal: 1;<br /> property int big: 3;<br /> }

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