📜 ⬆️ ⬇️

My recipe for working with CSS styles in Qt

Question
How can I freely assign different styles to the same type (for example QPushButton) components in Qt if I want to keep all styles in one css file?

Yes, and it is advisable to be able to do this from QtDesigner (we are not vicious self-torturers, everyone loves sugar)

A bit of background history or blah blah blah
It so happened that most of the code in my life came in the GUI. This code was written at different times in different languages ​​and platforms. As a result, now I am doing IT on Qt. And before Qt did the same on Flex (Adobe Flex). And before that was WinForms, MFC, VCL, etc. And I tell all this, in fact, with the aim:

1) to postulate that of all the above, Flex was the most convenient UI-development tool.
IMHO: WPF and the latest versions of Qt confirm this, since they adopt everything good from Flex
')
2) to bring to the heart of the problem that I encountered.
Flex was a pretty handy tool for skinning: CSS.

An example of using in Flex: in our interface we want to use green, red and blue buttons. We create three styles in the CSS file: greenButton, redButton and blueButton. And then we just climb over our molds and set a button at the button that we want to make green, styleName = "greenButton" (well, for other colors, respectively).

Now we move to Qt. Here, too, there is a mechanism for CSS, and moreover, here it is much more functional. BUT. There is a question. see question

Search for a solution
We look at the description of Qt-shnyh css. There is such an important concept as a selector. This is actually a certain condition, based on which style is applied or not to the object. So, what are the selectors:

1) by type. those. a style is applied to all controls of this type (for example, to all objects of type QPushButton)
Nifiga it does not suit me. All my buttons are of QPushButton type, but some of them I want to make of one style, and some of another.

Here it is necessary to make one confession. I am ashamed to talk about it. Fair. But until the last moment, I was engaged in creating classes by the heirs of QPushButton with the sole purpose of using this selector. Those. I created the GreenButton class: public QPushButton, RedButton: public QButton, etc. And then just in QTDesigner I pushed QPushButton to one of my classes, depending on what style I want to impose on it. Here it is. Do not hit your feet.

2) by name. Do not roll once.

3) by the value of any property.
Here it is. It would fit. It would be nice if QWidget had a tag property, where you could write anything without affecting the rest of the functionality.

And now my answer.

My answer
Most recently, I suddenly discovered a green cross in QtDesigner. No, he was always there, I just ignored him stubbornly. It turned out this cross adds a dynamic property to the object. Well, that's actually the whole answer :)

Those. in our example, we simply add for the buttons (to which we want to apply greenButtonStyle) the blessing greenButton = true [via QtDesigner or setProperty ("greenButton", QVariant (true));]
And in CSS we write:

QPushButton[greenButton="true"]<br>
{<br>
greenButtonStyle content;<br>
}<br>
<br>
QPushButton[redButton="true"]<br>
{<br>
redButtonStyle content;<br>
}<br>
<br>
and so on<br>


Here is a perversion.

Maybe someone knows the solution better?

You know what's best? Tell me

Source: https://habr.com/ru/post/88876/


All Articles