SetStyleSheet to set the style of the widget

Use setStyleSheet to set the appearance of the graphic interface:
QT Style sheet is a good tool that allows you to customize the appearance of a window,
In addition, the subclass QStyle can also be used to complete the process. Its syntax is largely based on html CSS, but it is applicable to Windows.

 

Summary:
Style sheet is a text setting. You can use QApplication: setStyleSheet () for the entire application or use QWidget: setStyleSheet () for a corresponding window (), if several style sheets are set at different levels,

QT sets all style sheets to set the appearance, which is called cascading
For example, the following style sheet specifies that all QLineEdit should use yellow as their background color, and all check boxes should use red as their text color.
QLineEdit {background: yellow}
QCheckBox {color: red}

 

For this customization, style sheets are more powerful than the palette. For example, setting a Button to red using QPalette: Button role may cause danger.

You can specify
The style sheet acts on the top of the current window style, which means that the application looks as natural as possible, but any style sheet system parameters should be considered. Unlike QPalette, Style Sheets provide checks, if you set the background color of a button to red

Color, you should be sure that there will be a red background in all the platform buttons, In addition, Qt Designer provides the style sheet integration environment, this makes it easier to see the effect of the style sheet in different window styles.

 

In addition, style sheets can be used to provide an outstanding appearance for your application without the need to use a subclass QStyle. For example, you can specify any image as a single-choice button and a check button, to make them stand out. You can also use this technology to help determine

This will use several subclasses, such as specifying style hint (Style hint). See the style Sheet example.

When a style table is valid, you can use QWidget: style () to return QStyle,

 

Style table Syntax:
The style sheet syntax is basically the same as the html css syntax.
A style sheet contains a sequence of style rules, which are composed of <selector> and <declaration>. <selector> specifies which windows will be affected by these rules, <declaration> specify which attributes will be set in the window, for example
QPushButton {color: red}
In the preceding rule, QPushButton is <selector> and {color: red} is <declaration>. This rule specifies that QPushButton and its subclass use red as the foreground color, is the font color, and the case sensitivity is not different,

Color, ColoR, and COLOR are the same.
Several <selector> can be listed at the same time. Use commas (,) to separate each <selector>. For example:
QPushButton, QLineEdit, QComboBox {color: red}
The <declaration> part is a pair of attributes: value pairs, which are enclosed by {} and separated by semicolons (;). For example
QPushButton {color: red; background-color: white}

You can refer to QT style sheets reference to view the property list of parts and style sheets.

 

Cascade attributes of a style sheet
See the following code
Btn1-> setstylesheet ("qpushbutton {color: Red}"); // set the foreground color, that is, the font color.
Btn1-> setstylesheet ("qpushbutton {Background: yellow}"); // set the background color to red.
And
Btn1-> setstylesheet ("qpushbutton {color: red; Background: yellow }");
The first code can only display the yellow background, and the second is indeed the red font, the yellow background,
Therefore, when setting a part, it must be completely written in the same> setstylesheet.

 

 

Source code example:

 

Dialog: Dialog (qwidget * parent ):
Qdialog (parent ),
UI (new UI: Dialog)
{
UI-> setupui (this );
This-> setWindowFlags (this-> windowFlags () & Qt: WindowMaximizeButtonHint & Qt: WindowMinimizeButtonHint); // Add the maximize and minimize buttons to the dialog box.
// Layout = new QBoxLayout (this );
Layout1 = new QGridLayout (this );
Btn1 = new QPushButton (this );
Btn1-> setStyleSheet ("QPushButton {color: red; background: yellow}"); // set the foreground color, that is, the font color.
// Btn1-> setStyleSheet ("QPushButton {background: yellow }");
Btn1-> setText ("Button1 ");

Btn2 = new QPushButton (this );
Btn2-> setStyleSheet ("QPushButton {color: red; background-color: rgb (200,155,100)}"); // use rgb to set the background color
Btn2-> setText ("Button2 ");

Btn3 = new QPushButton (this );
Btn3-> setStyleSheet ("QPushButton {background-image: url (image/1.png); background-repeat: repeat-xy; background-position: center; background-attachment: fixed; background-attachment: fixed; background-clip: padding }");
// Set the background image of the button. background-repeat can be used to set the repeat rule for the background image. Here, it is set to be repeated only in the xy direction, so the image will be repeated once.
// Background-position is used to set the image position, whether it is left or right or center, top or bottom)
// Background-attachment is used to determine whether the background image is flushed or matches the window size. The default value is flushed.
Btn3-> setText ("Button3 ");

Btn4 = new QPushButton (this );
Btn4-> setStyleSheet ("QPushButton {border: 3px solid red; border-radius: 8px}"); // you can specify the border Width and color.
// You can use border-top, border-right, border-bottom, and border-left to set the top, bottom, and left borders of the buttons,
// Border-left-color, border-left-style, and border-left-width are used to set their colors, styles, and widths respectively.
// Border-image is used to set the background image of the border.
// Border-radius is used to set the Radian of the border. Button with rounded corners
Btn4-> setText ("Button4 ");

// Font setting
// Font-family to set the family to which the font belongs,
// Font-size to set the font size
// Font-style to set the font style
// Font-weight to set the font depth
// Height is used to set the height.
// Selection-color is used to set the selected color.
Edit1 = new QLineEdit (this );
Edit1-> setstylesheet ("qlineedit {Font: bold italic large/" Times New Roman/"; font-size: 25px; color: RGB (55,100,255); Height: 50px; Border: 4px solid RGB (155,200, 33); border-radius: 15px; selection-color: pink }");

// Set the parent window
// Icon-size to set the image size
This-> setmediawicon (qicon ("image/1.png "));
This-> setstylesheet ("qwidget {Background: Write URL (image/2.png); icon-size: 20px 5px}"); // set the background color of the entire dialog box
// This-> setstylesheet ("qwidget {icon-size: 20px 5px }");
Layout1-> addwidget (btn1, 0, 0 );
Layout1-> addwidget (btn2, 0, 1 );
Layout1-> addwidget (btn3, 1, 0 );
Layout1-> addwidget (btn4, 1, 1 );
Layout1-> addwidget (edit1, 2, 0 );
}

 

Here, only the CPP file in the main widget window is provided. The running result is as follows:

We can see that even the copy and paste board is changed to the style set using the style sheet.

 

For more information about how to use the style sheet setstylesheet () to set the window style, see

Http://blog.csdn.net/xie376450483/archive/2010/08/17/5818759.aspx