QSs to beautify the QT program and the recently made QT Project interface

What is QSS

QSS, known as QT style sheets, is the QT stylesheet, which is a mechanism provided by QT to customize the appearance of a control. QSS a lot of reference to the content of CSS, but the function of QSS is much weaker than the CSS, embodied in the selector is less, you can use a lot less qss properties, and not all of the properties can be used in all QT control.

The use of QSS in QT program

First write the QSS in the file, and then use the following code to set the QSS:

Mainwidget::mainwidget (Qwidget *parent):    qwidget (Parent),    UI (new Ui::mainwidget) {//Application style apply the QSS style< C2/>qfile file (":/qss/main.qss");    File.Open (qfile::readonly);    Qtextstream Filetext (&file);    QString stylesheet = Filetext.readall ();    This->setstylesheet (stylesheet); File.close ();}

The code is written in the constructor of the background CPP file in the UI interface, mainly the setting function of the This->setstylesheet () function, to illustrate that the function can be applied in addition to the overall UI of the class represented by the entire current number of constructs. The Setstylesheet () function itself is a member function of the qwidget, and almost all of the controls in Qt can be used to set their own styles directly using the function.

The grammatical rules of QSS

QSS syntax rules are almost identical to CSS. A QSS style is made up of two parts, part of which controls are affected by the selector, and the other is the value of the property that is specified to indicate which properties of those controls are affected. For example:

Qpushbutton {color:red}

Qpushbutton represents the selector, which specifies that all Qpushbutton or Qpushbutton subclasses are affected, and that any subclass that inherits from Qpushbutton is also affected, which is different from the CSS. Because CSS is applied to a number of tags, there is no hierarchy of classes, there is no concept of sub-class. The following {color:red} is the definition of the rule, indicating that the specified foreground color is red. The whole meaning is to set the foreground color of the Qpushbutton class and all instances of its subclasses to be red.

If MyButton inherits from Qpushbutton, then the above rules will also be applied to all mybutton controls, but if the rules are as follows:

The red foreground color is applied only to instances of MyButton, but not to instances of Qpushbutton.

Selector type for QSS

1. Wildcard selector: *; Match all the controls
2. Type selector: Qpushbutton; Matches all instances of Qpushbutton and its subclasses
3. Property selector: Qpushbutton[flat= "false"]; Match all Qpushbutton instances where the Flat property is false, note that the property can be a custom property, not necessarily a property that the class itself has
4. Class selector:.  Qpushbutton; Matches all instances of Qpushbutton, but does not match its subclasses. This is not the same as the class selector in CSS, notice that there is a dot in front
5.ID selector: #myButton; Match all control instances with ID MyButton, where the ID is actually the value specified by objectname
6. Descendant selector: Qdialog Qpushbutton; All the Qpushbutton contained in the Qdialog container, whether direct or indirect
7. Sub-selector: qdialog > Qpushbutton; All Qdialog containers below the Qpushbutton, where the direct parent container that requires Qpushbutton is Qdialog

In addition, all of these selectors can be used in conjunction, and it is possible to set multiple selector types at once, separated by commas, as with CSS, such as #framecut, #frameInterrupt, #frameJoin means that all of these IDs use one rule. #mytable Qpushbutton represents selecting all Qpushbutton instances under the container with ID mytable

QSS child controls

QSS's child controls are actually one of the selectors, because this selector is somewhat different from the CSS, so separate out the QSS that the child control selectors are applied on some composite controls, typically such as Qcombobox, which has several parts in its appearance, typically with a rectangular outer border , there is a downward arrow on the right to prompt for a pop-up drop-down list after the click. For example:

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

The above style specifies a picture of all qcombobox drop-down arrows for a custom picture dropdown.png
::d the Ropdown child control selector can also be used in conjunction with the selector mentioned above:

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

To specify a custom picture of the drop-down arrow for the Qcombobox control with the ID named Myqcombobox, be aware that the child control selector is actually part of the selection of a composite control, that is, applying a style to a part of a composite control, such as specifying a picture for a qcombobox drop-down ARROW, Instead of specifying a picture for Qcombobox itself.

QSS provides a definition of child controls for many complex composite controls to facilitate styling of the various parts of these composite controls. Limited to space, this article also cannot list these available child controls, which are described in detail in the help that comes with the installation of Qtcreator.

QSS Pseudo State

The pseudo state selector for QSS is actually similar to the one in CSS, a selection expression that begins with a colon, for example: hover indicates the state when the mouse passes. He restricts the QSS rule to be applied when the control is in a certain state, the pseudo state can only describe the state of a control, or the state of a child control in a composite control, so the pseudo state selector can only be placed on the last side of the selector, for example:

qcombobox:hover{background-color:red;}

The rule indicates that when the mouse passes over the qcombobox, its background color is specified as red, the pseudo-state: hover describes the state of Qcombobox.
Pseudo-State in addition to the controls selected by the selector, you can also describe the state of the child controls in the composite control selected by the child control selector, for example:

Qcombobox::d rop-down:hover{background-color:red;}

Indicates that when the mouse passes the Qcombobox drop-down arrow, the background color of the drop-down arrow turns red.
In addition, the pseudo-state can use an exclamation mark to indicate no, for example: hover indicates that the mouse passed, while:!hover indicates that the mouse has not passed the state. Several pseudo states can be used together, for example:

Qcheckbox:hover:checked {color:white}

Specifies that when the mouse passes through a selected Qcheckbox, the foreground color of the text is set to white.
QSS provides a lot of pseudo-state, some pseudo-state can only be used on specific controls, the specific pseudo-state, in the QT help there is a detailed list, confined to the space is not listed here.

QSS Cascade and conflict

The cascade in QSS contains several aspects of the concept, one is that when applying two different rules on the same control, the question of which rule should be applied, that is, how to resolve the conflict. Two QSS rules that are set on a container control will have an effect on the controls inside the container (depending on what kind of rules the QSS rule is set on the container control, if the QSS rule set on the container control is only for the container control itself, the rule does not affect the child control. If the QSS rule has settings for the child control, it will naturally have an effect on the child control, and the cascading problem is to resolve when a control is wrapped by a layer parent container and has a style setting on the parent container for each layer, the final effect of the control is to merge the QSs effect on those parent containers.

Conflict issues:

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

These two rules will be applied to the button named OKButton, but they set a different color for the same property, there is a conflict, then to resolve such a conflict must take into account the specificity of the selector (the word how to understand, I understand that specificity for the more special, In fact, the CSS on the use of weights to represent the specificity here, obviously qpushbutton#okbutton only for the object named OKButton control has the effect, but Qpushbutton to all the Qpushbutton instance or its subclass of the instance has effect, Obviously the Qpushbutton#okbutton selector is more special, that is, more specific. So the final OKButton foreground color is applied as gray. If the specificity of the two rule is the same, then choose the one that is placed in the back.

In addition, if one selector has a pseudo state and the other is not, then the selector with the pseudo-state applied is more special, for example:

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

Obviously, Qpushbutton:hover is more specific than simple qpushbutton. These two rules indicate that the text is white when the mouse is placed on the button, and in other cases it is red.
If the specificity of the following two rules is the same, then how should it be applied:

qpushbutton:hover {Color:white}  //If the mouse is past the foreground white qpushbutton:enabled {color:red}  //If the button is enabled the foreground is red

So by default the foreground text is red, and when the mouse passes through it does not turn white, because their specificity is the same, so choose the back, that is, red.
So what happens when you change the order:

qpushbutton:enabled {color:red}  //If the button is enabled then the foreground red Qpushbutton:hover {color:white}  //If the mouse passes through the foreground white

When the mouse passes, it becomes white, because their specificity is the same, so choose the following rule, that is, the mouse through the foreground into white.
If you add the specificity of one of these, for example:

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

So the first rule is larger than the second one, so the first one is applied.
Another specificity occurs on the type selector:

Qpushbutton {color:red}   //apply on all Qpushbutton Qabstractbutton {Color:gray}//Apply on all Qabstractbutton

On the inheritance structure of the class, Qabstractbutton is the parent class of Qpushbutton, and obviously Qpushbutton is more specific, so the foreground color of Qpushbutton is applied as red instead of gray. Is there a way to determine the specific size of the two QSS rules, in fact, qss use of the specific calculation method and CSS is the same, in detail can refer to the CSS2 document specification, here or a brief explanation, the specificity of this thing in the CSS is generally called weight, the greater the weight of the more priority to use, The rules for calculating CSS are as follows:

1. Calculate the number of ID selectors in a rule, assuming that they are stored in variable a
2. Calculate the number of class selectors and attribute selectors in a rule, stored in variable b
3. Calculate the number of type selectors in a rule, stored in variable C
4. Ignore pseudo-elements, corresponding to child controls in QSS

The following are the specific calculation methods:

*             {}/  * 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 =  13 */li.red.level    {}/  * a=0 b=2 c=1-specificity = +/  #x34y        {}/  * a=1 b=0 c=0-Specifici ty = 100 */
   

The above calculation rules are the rules for the calculation of CSS, which can also be applied on QSS.

About cascading:

The QSS can be set on a qapplication, can also be set on a container part of a part, or set on a descendant part, the final style effect of a part is to merge all of his parent containers, grandfather containers, etc. set above the results of all styles, these settings will be superimposed. If a conflict occurs during cascading, such as the foreground color specified by the part itself is green, and its parent container specifies a foreground color of red, the style effect set by the part itself is selected. For example:

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

The first statement indicates that the style of the Qpushbutton is set on Qapplication, and the second statement indicates that the style is set on the Mypushbutton object. The final result sets the foreground color of the Mypushbutton to blue. Cascading effects are primarily applied when a control's style is set on more than one container control, and the final effect of the control is the merging of the effects on all the container controls. Cascading rules in the CSS itself is also a complex theme, if you are interested, or need to refer to the CSS2 Specification document, this section is just throwing jade.

Another thing to mention is that the style that appears to be set for the parent container control itself in QSS is not inherited by the quilt control, for example, if there is a Qpushbutton control in Qframe, the following statement:

Ui->frame->setstylesheet ("qframe{color:red; border:1px solid Red} ");

The statement only sets the foreground color for qframe and the effect of the border does not apply to the Qpushbutton inside it, if the following statement is true:

Ui->frame->setstylesheet ("qpushbutton{color:red; border:1px solid Red} "); Ui->frame->setstylesheet (" *{color:red; border:1px solid Red} ");

QSS what to pay attention to in practical application

In the use of QSS encountered some pits, seemingly simple, but if not know, it is very torture:
<1> using QSS to set the border is invalid, for example:

border:1px solid red; Okborder:solid 1px red; errorborder:red 1px solid; Errorborder:red solid 1px; Error

Set the border color and pixels, must be the first order, and CSS is indifferent, as for the reason, I do not know, is so deceptive.

<2> qss Setting width height is invalid:
Setting the width height in the QSS must be set using Min-width and Min-height,max-width,max-height, with the width and height setting to have no effect.

<3>qcombobox the problem with the style setting:
Qcombobox is a complex control, Qcombobox consists of 3 parts, one is the qcombobox frame, there is a drop-down button, the button can be qcombobox::d Rop-down to control its position, Define it to the left of qcombobox and not necessarily to the right. In addition, this drop-down button generally has a downward arrow, the arrow image can be customized, by Qcombobox::d own-arrow To specify the arrow image.

If you want to control the style of the pop-up drop-down list for qcombobox, you need to:

Qcombobox Qabstractitemview {//sets the style of the drop-down list that pops up when the drop-down  button is clicked, note that the style here  //Only sets the style of the rectangle that pops the entire drop-down list range, cannot set the drop-down list  For each drop-down item in the style, for example, you cannot set each drop-down height}qcombobox{  //Set the style that does not pop up the drop-down list}qcombobox Qabstractitemview::item {// Set the style of each drop-down item in the pop-up drop-down list, where the style is to take effect, and the following settings must be set for Qcombobox//qstyleditemdelegate* itemdelegate = new Qstyleditemdelegate () ;//combox->setitemdelegate (itemdelegate);    }

Examples of QT development programs

The previous time with QT developed a video export and editing tools based on the company platform, as a case to stick it out, or there are a lot of places to beautify:

Login interface, the use of QT provided by the regular validation function, if the input IP does not conform to the rules, it is not input, for example, if you enter an illegal character, the text box does not respond

After logging in to the main interface, a total of 7 tabs, each tab represents a function:

Video export: Export the video data on the Web platform, including the file, the end of the title, the index of the video, you can export the movie mode, the resource mode, support the breakpoint to continue the transmission.
Video clipping: You can cut out what you don't want in your video
Video capture: Capturing the parts needed in a video
Post-pilot: Post-pilot for resource patterns
Create a title end: A fool-generated picture file for the end of a trailer
Composition title End: Adds a picture file at the end of the title to the beginning and end of a video
transcoding uploads: transcoding Multiple formats of video files into MP4 files and uploading them to the web platform

The video export function, in fact, is to export a courseware, the courseware may be recorded with movie mode video, resource mode video, or both. Features are described below:

Video clipping to cut the video:

To intercept a video:

Post-Pilot The resource pattern:

Create a custom title trailer (in fact, it is a fool-like to let the user create a custom picture), the text can be dragged, can be keyboard fine-tuning, can be modified:

Merge the end of the title, will generate a good end of the title of the picture, merged into a MP4 beginning and end, you can specify the title of the end of the picture file, and specify the time at the beginning or end of the MP4 display:

Transcoding and uploading:

The appearance of the program includes, drop-down list, text input box, button, table, tab, etc. are all set using QSS. QSS reference CSS, all of the properties are the same as CSS, but not all CSS properties can be used in QSS, and not all QT control support CSS box model, QT Help in the section about QSS details the list of available QSS attributes, as well as the list of controls, The pseudo-state list, the list of child controls, the list of icons available in QSs, and the list of units for the QSS attribute values, are limited to a detailed description of all of these, in fact, in the Help documentation after installing Qtcreator, a list similar to the following figure (description of partial pseudo-states):

Disclaimer: The copyright of this software interface is owned by the company

QSs to beautify the QT program and the recently made QT Project interface