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