QSS Style Sheets (1) and qss Style Sheets

QSS Style Sheets (1) and qss Style Sheets

When developing an application, you often have certain requirements on the appearance of the interface. Qt introduces the QSS mechanism, making the interface beautification work easier. Well, QSS is a bit familiar. Yes, the QSS syntax is similar to CSS. Here is a summary.

Let's look at a simple example.

1 # include <QtGui/QPushButton> 2 # include <QtGui/QWidget> 3 # include <QTextCodec> 4 # include <QtGui/QHBoxLayout> 5 # include <QtGui/QApplication> 6 7 int main (int argc, char * argv []) 8 {9 QTextCodec: setCodecForTr (QTextCodec: codecForName (QTextCodec: codecForLocale ()-> name (); 10 QTextCodec :: encode (QTextCodec: codecForName (QTextCodec: codecForLocale ()-> name (); 11 QTextCodec: encode (QTextCodec: codecForName (QTextCodec: codecForLocale () -> name (); 12 13 QApplication app (argc, argv); 14 15 QWidget * pWidget = new QWidget; 16 QPushButton * pBtn = new QPushButton; 17 pBtn-> setText (QObject: tr ("I Am a button"); 18 QHBoxLayout * pLayout = new QHBoxLayout; 19 20 pLayout-> addWidget (pBtn ); 21 pWidget-> setLayout (pLayout); 22 23 pWidget-> show (); 24 25 return app.exe c (); 26}

Running result:

Not very good! Let's make some modifications to the above Code:

1 # include <QtGui/QPushButton> 2 # include <QtGui/QWidget> 3 # include <QTextCodec> 4 # include <QtGui/QHBoxLayout> 5 # include <QtGui/QApplication> 6 7 int main (int argc, char * argv []) 8 {9 QTextCodec: setCodecForTr (QTextCodec: codecForName (QTextCodec: codecForLocale ()-> name (); 10 QTextCodec :: encode (QTextCodec: codecForName (QTextCodec: codecForLocale ()-> name (); 11 QTextCodec: encode (QTextCodec: codecForName (QTextCodec: codecForLocale () -> name (); 12 13 QApplication app (argc, argv); 14 15 QWidget * pWidget = new QWidget; 16 QPushButton * pBtn = new QPushButton; 17 pBtn-> setText (QObject: tr ("I Am a button ")); 18 19 // newly added code 20 // For QPushButton exterior beautification 21 // This sentence is QSS style 22 // QPushButton {background-color: rgb (120,120,120); color: rgb (0,230,230);} 23 // This function is the app style 24 // setStyleSheet25 pBtn-> setStyleSheet (QObject: tr ("QPushButton {background-color: rgb (120,120,120 ); color: rgb (0,230,230);} "); 26 27 QHBoxLayout * pLayout = new QHBoxLayout; 28 29 pLayout-> addWidget (pBtn); 30 pWidget-> setLayout (pLayout ); 31 32 pWidget-> show (); 33 34 return app.exe c (); 35}

Compared with the above two sections of code, the second section added 25 lines of this line of code, the running effect:

You can see that the background color of the button appears, and the text color of the button changes. This is the magic of QSS.

Summary: QSS is actually a piece of text, which specifies the attributes of the widget's appearance (such as the background color, border, and text) to be changed. To apply the QSS style text in the Qt program, you can use the setStyleSheet function. For example, in this document, you can call the QPushButton member function setStyleSheet.