Dynamic Properties and Stylesheets

English Spanish German

Dynamic Properties and Stylesheets

Stylesheets makes it possible to customize the look of Qt applications without having to master the magic behind Qt styles. For lighter tweaks, to the quite complex, stylesheets can do the job. For the real unique user experience, QtQuick and

QGraphicsView

is 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. 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. For dynamic changes in the user interface look, the property value selector can be used in combination with dynamic properties. Dynamic properties was introduced in Qt 4.2 and allows your to assign property values to

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

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.

[urgent=true]
{
 color: red;
}

This does not have to be limited to

QLineEdits

though. Setting the urgent property to true on a

QCheckBox

or

QPushButton

will make their texts red as well. Basically, any stylesheet aware widget can be turned red using this simple trick.

Limitations

There are however limitations to using this trick. The main one is, that the style will not update itself automatically when the value of the property changes. This limits the usefulness of this feature, as you can not simply trigger an update of the visual appearance of a widget by only changing a simple property that you referenced from the style sheet.

_*Note :-*_

While implementing dynamic properties we need to update the widget when the property changes , For eg we want to paint a frame with red color if there is an error. So we can set the stylesheet for the frame as

QFrame#TestDisplayFrame[error="true"]
{
 background-color: red;
 border: 2px solid rgba(205, 92, 92, 255);
 border-radius: 20px;
}

Then wherever we are changing the property we need to add the following code to trigger an update

tstFrame->setProperty("error",true);
tstFrame->style()->unpolish(tstFrame);
tstFrame->style()->polish(tstFrame);
tstFrame->update();