Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

Preface:

Qt style sheets (CSS) is a custom widget look very powerful mechanism, stylesheet can use QApplication: : setStyleSheet () function to set it to the entire application, You can also set it to a specified part (and its children) using the QWidget::setStyleSheet() function.

If stylesheets are set at different levels, Qt uses all valid stylesheets, which are cascading stylesheets.

Set the style sheet:

1. Set the style sheet for the specified widget:

// Set the color of pushButton UI ->pushButton->setStyleSheet("background:yellow"); // Set the horizontalSlider's background color UI ->horizontalSlider->setStyleSheet("background:blue");Copy the code

By specifying the component’s setStyleSheet() function, this style will only be applied to that component.

2. Use the same style for all the same parts:

// Call setStyleSheet() on the parent form. This ->setStyleSheet("QPushButton{background:yellow}QSlider{background:blue}");Copy the code

Thus, all QPushButton widgets and QSlider widgets on the parent form will have the same background color as we set.

In this way, items in a QListWidget can be styled uniformly:

"QListWidget{border:0px; background-color:#FFFFFF; outline:0px; } QListWidget::Item {background:#FFFFFF; } QListWidget::Item:hover {background:#EEEEEE; } QListWidget::item:selected {background:#DDDDDD; } QListWidget::item:selected:! active {background:#FFFFFF; }"Copy the code

3. Set the style of the parent widget, and the child widget does not inherit:

QWidet this->setObjectName("myWidget"); this->setStyleSheet(QWidget#myWidget{background:black});Copy the code

Here the setObjectName(“myWidget”) is used to set the name of the parent widget. In the setStyleSheet() function, by specifying “#myWidget”, we specify that the style we set will only apply to the myWidget, and that the children in it will not inherit the style of the parent widget.

This method can also be used in conjunction with method 2, which calls the setStyleSheet() function of the parent. In addition to writing the style of the parent, you can also specify the objectName of the child and set the child.

4. In the main function call QApplication: : setStyleSheet () program for style Settings:

Call it directly in the main function: qApp->setStyleSheet(); Parameter is the style of the part, this method can be implemented to call the QSS file, implement the style setting.

QFile qss(":/qss/style.qss");
qss.open(QFile::ReadOnly);
qApp->setStyleSheet(qss.readAll());
qss.close();
Copy the code

The Settings in the style.qss file are shown below:

In this way, the QScrollBar in the whole program will be set in the style of the picture, this method is suitable for style unification, reduce the amount of code.

Qt style sheet notation:

The terminology and syntax of Qt stylesheets are basically the same as HTML CSS.

1. Style rules:

A style sheet contains a series of style rules, each made up of a selector and a declaration.

  • The selector specifies the parts affected by this rule;
  • The declaration specifies the properties to be set on the part;

Example: QPushButton {color: red}

  • QPushButton is a selector;
  • {color:red} is a declaration, where color is the property and red is the value of the property.

Some selectors can specify the same declaration, separated by commas.

For example: QPushButton QLineEdit, QComboBox {color: red}

The declared part of a style rule is a list of attribute: value pairs enclosed in braces, separated by a semicolon.

For example: QPushButton {color: red; background-color:white}

You can view all the Properties supported by the Qt stylesheet in the List of Properties section of the Help documentation corresponding to the Qt Style Sheets Reference keyword.

2. Child controls:

Styling complex widgets may require access to their child controls, such as the drop down button for QComboBox, the up and down arrows for QSpinBox, and so on. A selector can contain child controls to style specific child controls of the part.

For example: QComboBox: : the drop – down {image: url (dropdown can. PNG)}

The List of Stylabel Widgets in the Help document corresponding to the Qt Style Sheets Reference keyword lists all the Qt Widgets that can be used to customize the Style from the stylesheet. All available child Controls are listed in the List of Sub-Controls section.

3. Pseudo state:

  • A selector can contain pseudo state to restrict the application of rules to the specified state of the part. The pseudo-state appears after the selector, separated by a colon.

For example: QPushButton:hover{color:white}; Indicates that when the mouse hovers over QPushButton, the color is white.

  • A false state can be negated with an exclamation mark.

For example: QRadioButton:! Hover {color: red}; Indicates that the color is red when the mouse is not hovering over the QRadioButton.

  • Pseudo state can be used multiple times to achieve the effect of logic and.

For example: QCheckBox: hover: checked {color: white}; Indicates that the color is white only when you hover over a selected QCheckBox widget.

  • A pseudo-state can be used as a comma to indicate logic or operations.

For example: QCheckBox:hove, QCheckBox:checked{color:white}; Indicates that QCheckBox is white when the mouse hovers over it, or white when QCheckBox is selected.

  • Pseudo state can be used in conjunction with child controls.

For example: QComboBox: : the drop – down: hover {image: url (dropdown can. PNG)}; If you hover over the drop-down button of QComboBox, the image of the drop-down button is dropdown.png.

4. Conflict resolution:

Conflicts occur when several style rules specify different values for the same attribute. Such as:

QPushButton#okButton{color:gray};
QPushButton{color:red};
Copy the code

At this point, the okButton color property conflicts. The principles for conflict resolution are:

  • Special selectors take precedence.
  • Pseudo-states take precedence over non-pseudo-states.
  • The part’s own style sheet takes precedence over any inherited style sheet, and the parent part’s style sheet takes precedence over the ancestor’s style sheet.

So okButton ends up grey.

5. Cascade:

Stylesheets can be set on QApplication, parent, or child. The part effective style sheet is created by combining the part ancestor style sheet with the style sheet on QApplication.

In the event of a conflict, the component’s own style sheet takes precedence over any inherited style sheet, and similarly, the parent component’s style sheet takes precedence over the ancestor’s style sheet.

6. Inheritance:

When using Qt stylesheets, widgets do not automatically inherit font and color Settings from their parents. For example, if a QPushButton is contained in a QGroupBox, set the color to red for the QGroupBox, but do not set the style sheet for the QPushButton. In this case, the QPushButton will use the system color instead of inheriting the QGroupBox color.

Some properties have inheritance and some properties have no inheritance.