Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
Dynamic Properties and Stylesheets: Difference between revisions
No edit summary |
Waldyrious (talk | contribs) (+link to official docs) |
||
(6 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
{{LangSwitch}} | |||
[[Category:HowTo]] | |||
:''See also the official documentation: {{DocLink|stylesheet-examples|customizing-using-dynamic-properties|Customizing Using Dynamic Properties}}'' | |||
== Introduction == | |||
Qt stylesheets make it possible to customize the look of Qt applications without having to master the magic behind Qt styles. From lighter tweaks to the quite complex, stylesheets can do the job. For a fully customized and unique user experience, QtQuick and {{DocLink|QGraphicsView}} are a better choice. | |||
When using stylesheets, styles are applied using selectors. For instance, the snippet below gives all | When using stylesheets, styles are applied using selectors. For instance, the snippet below gives all {{DocLink|QLineEdit}} widgets a yellow background color, if this style sheet is set on the form widget or on a widget that contains it. Here, the selector is the word <tt>QLineEdit</tt>: | ||
<code>QLineEdit | <code> | ||
QLineEdit | |||
{ | |||
background: yellow; | |||
} | |||
</code> | |||
There are numerous selectors based on object names, sub-controls, pseudo-states and more. These can be used to change the look of a user interface and also make all | There are numerous selectors based on object names, sub-controls, pseudo-states and more. These can be used to change the look of a user interface and also make all {{DocLink|QPushButton}} widgets named ''okButton'' have green text, and so on. | ||
== Custom properties == | |||
For dynamic changes in the user interface look, the property value selector can be used in combination with dynamic properties. Dynamic properties were introduced in Qt 4.2 and allow you to assign property values to {{DocLink|QObject}}s for properties that do not exist at compile time. I.e. if you choose to set the a property called ''urgent'' to true for a {{DocLink|QObject}}, that property will stick even tough the class does not contain a <tt>Q_PROPERTY</tt> macro for the property ''urgent''. | |||
Creating a stylesheet selector relying on a dynamic property, e.g. ''urgent'', makes it possible to highlight parts of the user interface in a very dynamic manner. For instance, adding the following rule to the stylesheet above will given any {{DocLink|QLineEdit}} with the ''urgent'' property set to true red text on a yellow background. | |||
This does not have to be limited to | <code> | ||
QLineEdit[urgent=true] { | |||
color: red; | |||
} | |||
</code> | |||
This does not have to be limited to QLineEdits though. if the selector was changed from <tt>QLineEdit[urgent=true]</tt> to <tt>[urgent=true]</tt>, setting the ''urgent'' property to true on a {{DocLink|QCheckBox}} or QPushButton will make their texts show in red as well. Basically, any stylesheet aware widget could be turned red using this generic selector. | |||
== Limitations == | == Limitations == | ||
There are | There are limitations to using this trick. The main one is that the style will not update itself automatically when the value of a property referenced from the style sheet changes. Instead, you must manually trigger an update of the visual appearance of a widget when a styled property changes. For example: | ||
<code> | |||
myLineEdit->setProperty("urgent", true); | |||
myLineEdit->style()->unpolish(myLineEdit); | |||
myLineEdit->style()->polish(myLineEdit); | |||
</code> | |||
Note that this must be done in the widget to which the style was applied. {{DocLink|qstyle|polish|QStyle::polish}} accepts either a QWidget or a QApplication as a parameter. | |||
Latest revision as of 11:40, 20 June 2016
- See also the official documentation: Customizing Using Dynamic Properties
Introduction
Qt stylesheets make it possible to customize the look of Qt applications without having to master the magic behind Qt styles. From lighter tweaks to the quite complex, stylesheets can do the job. For a fully customized and unique user experience, QtQuick and QGraphicsView are a better choice.
When using stylesheets, styles are applied using selectors. For instance, the snippet below gives all QLineEdit widgets a yellow background color, if this style sheet is set on the form widget or on a widget that contains it. Here, the selector is the word QLineEdit:
QLineEdit
{
background: yellow;
}
There are numerous selectors based on object names, sub-controls, pseudo-states and more. These can be used to change the look of a user interface and also make all QPushButton widgets named okButton have green text, and so on.
Custom properties
For dynamic changes in the user interface look, the property value selector can be used in combination with dynamic properties. Dynamic properties were introduced in Qt 4.2 and allow you to assign property values to QObjects for properties that do not exist at compile time. I.e. if you choose to set the a property called urgent to true for a QObject, that property will stick even tough the class does not contain a Q_PROPERTY macro for the property urgent.
Creating a stylesheet selector relying on a dynamic property, e.g. urgent, makes it possible to highlight parts of the user interface in a very dynamic manner. For instance, adding the following rule to the stylesheet above will given any QLineEdit with the urgent property set to true red text on a yellow background.
QLineEdit[urgent=true] {
color: red;
}
This does not have to be limited to QLineEdits though. if the selector was changed from QLineEdit[urgent=true] to [urgent=true], setting the urgent property to true on a QCheckBox or QPushButton will make their texts show in red as well. Basically, any stylesheet aware widget could be turned red using this generic selector.
Limitations
There are limitations to using this trick. The main one is that the style will not update itself automatically when the value of a property referenced from the style sheet changes. Instead, you must manually trigger an update of the visual appearance of a widget when a styled property changes. For example:
myLineEdit->setProperty("urgent", true);
myLineEdit->style()->unpolish(myLineEdit);
myLineEdit->style()->polish(myLineEdit);
Note that this must be done in the widget to which the style was applied. QStyle::polish accepts either a QWidget or a QApplication as a parameter.