qt-style-sheets-syntax

QT Style Sheet Grammar English original
QSS's terminology and syntax are almost the same as HTML CSS, and if you are already familiar with CSS, you can quickly browse through this article. style rules

A style sheet is made up of a series of style rules. A style rule consists of a selector and a declaration statement, and the selector indicates which (or which) part will be affected by the rule , and the declaration statement indicates which attributes are set to the (these) part.

As an example:

Qpushbutton {color:red}

In the above style rule,Qpushbbutton is the selector , and {color:red} is the declaration statement . This rule indicates that Qpushbutton and its subclasses (such as: Mypushbutton) should use red as their foreground color. QT style sheets are usually case-insensitive (for example: color, color, color, and color are all representations of the same attribute). Of course, there are case-sensitive, class names, object names, qt attribute names (which are not the same as the color attributes, which are explained in detail later), and are all case-sensitive.

Several selectors can specify the same declaration statement, using (,) to separate the different selectors, for example, the following rules:

Qpushbutton, Qlineedit, Qcombobox {color:red}

is equivalent to the following three rules:

Qpushbutton {color:red}
qlineedit {color:red}
qcombobox {color:red}

The declaration statement part of a style rule is a property: A list of value pairs, wrapped by ({}), separated by semicolons, for example:

Qpushbutton {color:red; Background-color:white}

See more of the list of properties provided by QT Widgets (property name maybe look at it and know what it means, and have time to say it in detail) selector type

So far, all the examples are using a simple selector, the type selector. The QT style sheet supports all CSS2-defined selectors. The following table summarizes several of the most commonly used selector types.

selector	instance	Description
Universal Selector	*	Match all Widgets
Type Selector	Qpushbutton	Matches all Qpushbutton instances and subclasses that inherit from it
Property Selector	Qpushbutton[flat= "false"]	Match all flat Qpushbutton (typically, use the Q_PROPERTY macro to declare your attributes, such as the flatin this example), and be aware that your attribute type is supported by Qvariant::tostring () ( View the help documentation for the ToString () method for a more detailed explanation. This selector type can also be used to determine dynamic properties and to learn more about the details of using custom dynamic properties, refer to using custom dynamic properties. In addition to using =, you can also use ~= to determine whether a qstringlist contains a given qstring. warning : If the corresponding property value changes when the stylesheet is set (for example: Flat becomes "true"), it is necessary to reload the stylesheet, and one effective way is to cancel the style sheet and reset it again, and the following code is one of the ways: Style ()->unpolish (this); Style ()->polish (this);//Force a stylesheet Recomputation
Class Selector	. Qpushbutton	Matching all Qpushbutton instances, but excluding its subclasses, is equivalent to *[class~= "Qpushbutton".
ID Selector	Qpushbutton#okbutton	Matches all Qpushbutton instances of object name "OKButton".
Descendant Selector	Qdialog Qpushbutton	Matches all Qpushbutton instances that inherit from Qdialog, including all its descendants.
Child Selector	Qdialog > Qpushbutton	Matches all Qpushbutton instances of direct inheritance and Qdialog.

Sub-controls

In order to style your complex widget, it is necessary to use the widget's subcontrol, such as the Drop-down part of the Qcombobox or the upper and lower arrows of the qspinbox. The selector may contain the subcontrols that Subcontrols uses to restrict the widget, for example:

Qcombobox::d rop-down {image:url (dropdown.png)}

The above rules style all the drop-down parts of Qcombobox, although double colons (::) reminiscent of CSS3 's pseudo element syntax, but QT's sub-controls is not the same as it is.

Sub-controls is always positioned relative to another element-a reference element. This reference element can be either a widget or another sub-control. For example, Qcombobox::d Rop-down is placed in the upper-right corner of the Qcombobox padding rectangle (box model) by default. ::d Rop-down is placed in another: the center of the:d Rop-down Sub-control. View a list of the stylesheet widgets to learn more about using Sub-control to style widgets and initializing their location.

Source rectangle can be changed using Subcontrol-origin. For example, if we want to place Drop-down in the qcombobox margin rectangle instead of the default padding rectangle, we can specify as follows:

Qcombobox {
    margin-right:20px;
}
Qcombobox::d rop-down {
    subcontrol-origin:margin;
}

The arrangement of Drop-down in margin rectangle can be changed by subcontrol-position.
The width and Height properties can be used to control the size of the Sub-control. It should be noted that setting the image implicitly sets the size of the Sub-control.

The relative positioning scheme (position:relative) allows the position of the Sub-control to be offset from its initialization position. For example, when the Qcombobox drop-down button is pressed, we may want the arrow to make a displacement to show a "pressed" effect, and in order to achieve the goal, we can specify as follows:

Qcombobox::d own-arrow {
    image:url (down_arrow.png);
}
Qcombobox::d own-arrow:pressed {
    position:relative;
    top:1px; left:1px;
}

The absolute Positioning Scheme (Position:absolute) enables Sub-control position and size to change based on their reference elements.

Once positioned, they will be treated in the same way as the widget and can be styled using the box model.

Look at the Sub-control list to see if those sub-control are supported, and you can view a custom Qpushbutton menu indicator Sub-control to learn about a practical usage example.

  Note : Complex parts like Qcombobox and Qscrollbar, if one of the properties of Sub-control is custom, then all other attributes and Sub-control should also be customized. Pseudo State

Selectors may contain pseudo states of program restriction rules based on the widget's state. The pseudo state is separated by a colon (:) as a separator immediately following the selector. For example, the following rule takes effect when the mouse hovers over the Qpushbutton:

Qpushbutton:hover {Color:white}

The pseudo state can be reversed using an exclamation point, and the following rule takes effect when the mouse is not suspended above the Qradiobutton:

Qradiobutton:!hover {color:red}

Pseudo states can be linked, in such cases, implicitly containing the logic and . For example, the following rule takes effect when the mouse hovers over a check qcheckbox:

QCheckBox:hover:checked {Color:white}

The pseudo state inversion can also appear in the pseudo state chain, for example, where the following rule takes effect when the mouse hovers over a Qpushbutton without the press:

qpushbutton:hover:!pressed {color:blue;}

If necessary, you can use commas to represent logic or :

Qcheckbox:hover, qcheckbox:checked {color:white}

Pseudo states can be used in combination with Subcontrol, for example:

Qcombobox::d rop-down:hover {image:url (dropdown_bright.png)}

View the pseudo-state list section provided by QT Widgets conflict resolution

A conflict occurs when several style rules specify a different value for the same property. Please consider the following style sheet:

Qpushbutton#okbutton {Color:gray}
Qpushbutton {color:red}

All two rules match a Qpushbutton instance named OKButton and conflict with the color property. In order to resolve the conflict, we must consider the particularity of the selector. In the above example, Qpushbutton#okbutton is considered more special than Qpushbutton because it (usually) points to a single object instead of all instances of Qpushbutton.

Similarly, a selector that specifies a pseudo state is more special than a pseudo state that is not specified. Thus, the following style sheet indicates that the font color should be white when the mouse hovers over the Qpushbutton, while the rest is red:

qpushbutton:hover {Color:white}
Qpushbutton {color:red}

Next look at a very interesting:

qpushbutton:hover {Color:white}
qpushbutton:enabled {color:red}

All two selectors have the same specificity, so the second rule takes precedence when the mouse hovers over a enabled button. If in this case we want the text to become white, we can rearrange the style rules like the following:

qpushbutton:enabled {color:red}
qpushbutton:hover {color:white}

In addition, we can make the first rule more special:

QPushButton:hover:enabled {Color:white}
qpushbutton:enabled {color:red}

Similar problems arise on the type selector that fits each other. Consider the following:

Qpushbutton {color:red}
Qabstractbutton {Color:gray}

All two rules apply to Qpushbutton instances (because Qpushbutton inherits from Qabstractbutton) and conflict with the color property. Because Qpushbutton inherited from Qabstractbutton, it is tempting to think that Qpushbutton is more special than Qabstractbutton. However, for style sheet operations, all type selectors are of equal specificity, and the rules that appear later are higher in precedence. In other words, the color of the Qabstractbutton is set to gray, including Qpushbutton. If we do want the Qpushbutton font color set to red, we can always implement it by rearranging the order of the style sheet rules.

To determine the specificity of the rule, QT style sheet following CSS2 specification

The particularity of a selector is computed in the following way:
-Count the number of ID attributes in the selector [=a]
-Count the number of other attributes and pseudo classes in the selector [=b]
-count the number of element names in the selector [=c]
-Ignore pseudo-primitives [such as: Subcontrol]

The concatenation of these three digital a-b-c (in a large cardinal number system) has been given a particular rank.

As an example:

*             {}/*  a=0 b=0 c=0-> specificity =   0/
LI {}/* a=0 b=0 c=1->-specificity  =   1 */
  
   ul LI         {}/  * a=0 b=0 c=2-> specificity =   2/
UL ol+li      {}  * a=0 b=0 c=3-> specificity =   3/
H1 + *[rel=up]{}/  * a=0 b=1 c=1-> specificity = one  */
UL OL li.red  {}/  * a= 0 b=1 c=3-> specificity =/
LI.red.level  {}/  * a=0  b=2 c=1-> = specificity > #x34y         {}/  * a=1 b=0 c=0-> specificity = 100 * *
  

Cascade

Style sheets can be set to qapplication, parent parts, and child parts. The style sheets that any part applies are obtained by merging the style sheets that are set to the ancestor part (father, grandfather, etc.), and any style sheets that are set to the qapplication.

When a conflict arises, the style sheet for the part itself always takes precedence over the inherited stylesheet, regardless of the specificity of the conflict rule calculation. Similarly, the parent part's style sheet priority is higher than the grandfather part, and so on.

One consequence of this is that a style rule on a part automatically gets higher than other style rules specified by the ancestor part or the qapplication style sheet. Consider the following example. First, we set the style sheet for qapplication:

Qapp->setstylesheet ("Qpushbutton {color:white}");

Then we set the style sheet for a Qpushbutton object:

Mypushbutton->setstylesheet ("* {color:blue}");

The style sheet set to Qpushbutton enforces that the font color of the Qpushbutton (including any of its child parts) is blue, although a more detailed style rule is given in the program-wide style sheet.

If we write the following, the effect is the same:

Mypushbutton->setstylesheet ("Color:blue");

If the Qpushbutton has children (which is unlikely), this style sheet is not valid for them.

Style sheet cascading is a very complex topic. Please refer to the CSS2 specification for more details. Please note that QT is not currently implemented. Very important. inherited

In a typical CSS, if the font and color of an item are not explicitly set, it is automatically obtained from its father. When using QT style sheets, a part does not inherit font and color settings from its father (note that fathers and parents, children, and subclasses are different concepts, don't confuse).

For example, consider a Qpushbutton in a qgroupbox:

Qapp->setstylesheet ("Qgroupbox {color:red;}");

Qpushbutton does not have any explicit color settings. Therefore, it gets the color of the system rather than the value of the color inherited from the father. If we want to set the color of Qgroupbox and all of its children, we can write this:

Qapp->setstylesheet ("Qgroupbox, Qgroupbox * {color:red;}");

In contrast, using Qwidget::setfont () allows you to set fonts that include children's fonts, and use Qwidget::setpalette () to set a palette that includes a child's palette. parts within a C + + namespace

Type selectors can be used to style specific types, for example:

Class Mypushbutton:public Qpushbutton {
    //...
}

// ...
Qapp->setstylesheet ("Mypushbutton {background:yellow;}");

The QT style sheet uses the widget's Qobject::classname () to determine when the type selector is applied. When a custom part is in a namespace, Qobject::classname () returns::. This has clashed with Subcontrol. To solve this problem, when you use a type selector for a widget in a namespace, we must replace "::" with "–". As an example:

namespace NS {
    class mypushbutton:public Qpushbutton {
        //...
    }
}

// ...
Qapp->setstylesheet ("Ns--mypushbutton {background:yellow;}");

set the properties of an object

After 4.3, any property declared using the Q_property macro can use the qproperty-<property name> syntax. As an example:

MyLabel {qproperty-pixmap:url (pixmap.png);}
Mygroupbox {Qproperty-titlecolor:rgb (MB);}
Qpushbutton {qproperty-iconsize:20px 20px;}

RELATED LINKS# # #所有Qt C + + class # #函数索引 # # #所有Qt模块 # #所有QML元素 # # #Qt Quick # # #Qt Creator Manual

Copyright NOTICE: This article for the main original article, welcome reprint, Reprint please indicate the source