Qt's style sheet is mainly inspired by CSS. By calling QWidget::setStyleSheet() or QApplication::setStyleSheet() , you can specify a style sheet for an individual subwidget, the entire window, or even the entire application. A style sheet consists of style rules that affect the drawing of widgets. These rules are plain text. Since the style sheet is parsed at runtime, you can try to design different Qt applications by customizing the style sheet.
1. Explanation of professional terms (10)
1.1, selector selector
The selector is to select a specific class, generally a Qt class that can customize the style sheet, sometimes it is one class and sometimes it is multiple classes.
1.2, sub-control auxiliary controller
The word auxiliary controller exists relative to the selector. It can be understood that we have selected a component, and this layout is composed of multiple components. It may need to be separated again and need to be set by the ::indicator auxiliary controller. Some controls only have this Attributes.
As shown in the figure below, it is a progress bar. When you want to beautify it into the blue style in the figure below, there are three parts, one is the border, the other is the percentage number, and the other is the inner color. It needs to be operated by an auxiliary controller;
1.3, pseudo-states state
In addition to assisting in the separation of controllers from a widget, style sheets can also set windows according to the individual states of widgets.
As shown in the figure below, when the mouse is over the button, the color is gray, and when it is pressed, it is white. This is called the state. For example, when the mouse is over, it is hover, when it is selected, it is checked, etc.
1.4. Properties
It is an inherent feature and property of a widget, and each widget will have its own properties. Such as width, height, etc.
1.5, value
The number after the attribute, for example, if the height is set to 200, then it should be height:200
1.6,! logical no
Sometimes when we set the attributes of a certain state, we want to set it in some non-(!) states at the same time. At this time, we need to use (!) to select a certain state, such as !checked
1.7, The Box Mode box model
This mode specifies 4 rectangles that affect the layout to draw a custom widget.
1.Content rectangle is the innermost rectangle, where it draws widget content (such as text, pictures).
2. The padding rectangle surrounds the content rectangle. It is responsible for the padding specified by the padding property. Mainly the gap between the widget content and the border, it can be sized with top, right, bottom and left. 3. The border rectangle surrounds the padding rectangle. It reserves space for borders. It can be thought of as the outer frame of the window. In the method of segmenting graphics described below, the border is understood as a region. Reference 4. Advanced application: Jiugongge division method 4. The outermost rectangle of margin rectangle, which surrounds the border rectangle, is responsible for the specified margin blank area, mainly responsible for the distance from other widgets. If you do not specify four of them, the default is that the four overlap together.
1.8, angle radian
The widget's four corner radians. radius sets the radian of the corner, such as border-radius:4px; the radian of the corner is 4px. As shown in the figure below, the default button is held, and the rounded button below is set through the secondary attribute.
1.9, background color and foreground color
The widget's foreground color is used to draw the text above the widget, which can be specified by the color property.
The background color used to draw the filled rectangle of the widget can be specified by the background-color property.
The background image is defined by the background-image attribute , which is used to draw the starting position of the image in the four regions specified by background-origin to start displaying in the box mode. The alignment and tiling of the background image within the box domain can be specified with the background-position and background-repeat properties. If the specified background image has an alpha channel (transparency effect), the color specified by background-color will show through the transparent area.
1.10、#
Specify a button, followed by the # sign is the object name of the specified class. As shown below:
