Make your Qt desktop program look more native (4): style sheet

Updates are much slower near the Spring Festival. I will write another article today. I don't know if it will be the last one before the Spring Festival. Bean wishes you a pleasant spring festival!

We know that HTML is only defined as a language for content layout. That is to say, what HTML should do is to tell the browser that this thing should be put here and that thing should be put there. As for how to display these things, such as red or blue, the definition of such a display should be handed over to CSS. Therefore, tags and attributes such as font and color are no longer recommended in the latest version of HTML. Similarly, there is also such a style table in Qt, called style sheet -- which is exactly the same as CSS. Not only are their names similar, but even their syntaxes similar.

Although style sheet is very useful, we should put forward a few points of attention. Style sheet should be used with caution because it will break the normal look and feel of the system. Do you still remember the safari that we mentioned earlier is out of sync with normal Windows programs? Therefore, when using style sheet, we should try to use the system color palette instead of defining an alternative color.

For a more detailed manual on style sheet syntax, we can go here to view it. Of course, if you have installed the QtWindows platform of the mingw version), this document is already in Qt Help. Here, we will not go into the detailed syntax details, but focus on how to correctly use the style sheet. Therefore, if you do not understand the syntax, please read the documentation for details.

It is easy to define the color of the label by yourself. Please refer to the following code:

 
 

  
  
#include <QtGui> 
  
  
 
  
  
int main(int argc, char *argv[]) 
  
  
{ 
  
  
    QApplication app(argc, argv); 
  
  
 
  
  
    QLabel label; 
  
  
    label.setText("Hello, style sheet!"); 
  
  
    label.setStyleSheet(QString("color:red")); 
  
  
    label.show(); 
  
  
 
  
  
    return app.exec(); 
  
  
} 
 
 

We use style sheet to define the label color as red, as shown in:

650) this. width = 650; "onclick = 'window. open (" http://blog.51cto.com/viewpic.php? Refimg = "+ this. src) 'border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1IAIb8-0.png "/>

This predefined color is simple. However, what if I want to use a system color? For example, do I want a system highlighted color? Do I have to find the highlighted RGB values by myself? The correct method is to use the system palette, as shown in the following code:

 
 

  
  
label.setStyleSheet(QString("color:palette(highlight)")); 
 
 

In this way, we can directly obtain the highlighted color from the system palette. Even different systems do not need to modify any code. The following are the running results on Windows 7:

650) this. width = 650; "onclick = 'window. open (" http://blog.51cto.com/viewpic.php? Refimg = "+ this. src) 'border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1IAHS7-1.png "/>

Even if you must use a custom color, the color should not be hard-coded. Instead, we use a flexible method, for example:

 
 

  
  
QColor color(128, 200, 128); 
  
  
label.setStyleSheet(QString("color:%1").arg(color.name())); 
 
 

The advantage of doing so is that you can easily let the user select the color, store it in the configuration file, and read the color value from the configuration file in the future startup without modifying the code.

Style sheet can be used to make a very beautiful display. Since the use of style sheet is much simpler than the custom style mentioned above, we recommend that you use this technology more. Next, let's create an apple-style forward/backward button. The effect is as follows:

650) this. width = 650; "onclick = 'window. open (" http://blog.51cto.com/viewpic.php? Refimg = "+ this. src) 'border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1IAK5D-2.png "/>

To create this button, we need the following four images:

650) this. width = 650; "onclick = 'window. open (" http://blog.51cto.com/viewpic.php? Refimg = "+ this. src) 'border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1IAH462-3.png "/>

650) this. width = 650; "onclick = 'window. open (" http://blog.51cto.com/viewpic.php? Refimg = "+ this. src) 'border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1IAH019-4.png "/>

650) this. width = 650; "onclick = 'window. open (" http://blog.51cto.com/viewpic.php? Refimg = "+ this. src) 'border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1IAG0X-5.png "/>

650) this. width = 650; "onclick = 'window. open (" http://blog.51cto.com/viewpic.php? Refimg = "+ this. src) 'border' =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1IAL647-6.png "style =" width: 27px; height: 23px; "/>

Name btn_left.png, btn_left_pressed.png, btn_right.png, and btn_right_pressed.png in the top-down order. Then, we use the following code:

 
 

  
  
#include <QtGui> 
  
  
 
  
  
int main(int argc, char *argv[]) 
  
  
{ 
  
  
    QApplication app(argc, argv); 
  
  
 
  
  
    QWidget segmentedButton; 
  
  
    QToolButton *backButton = new QToolButton(&segmentedButton); 
  
  
    QToolButton *forwardButton = new QToolButton(&segmentedButton); 
  
  
    segmentedButton.setLayout(new QHBoxLayout); 
  
  
    segmentedButton.layout()->setSpacing(0); 
  
  
    segmentedButton.layout()->setMargin(0); 
  
  
    backButton->setStyleSheet(QString("QToolButton{border-image:url(:/btn_left.png)}" 
  
  
                                      "QToolButton:pressed{border-image:url(:/btn_left_pressed.png)}")); 
  
  
    forwardButton->setStyleSheet(QString("QToolButton{border-image:url(:/btn_right.png)}" 
  
  
                                      "QToolButton:pressed{border-image:url(:/btn_right_pressed.png)}")); 
  
  
    backButton->setFixedSize(28, 23); 
  
  
    forwardButton->setFixedSize(28, 23); 
  
  
    segmentedButton.layout()->addWidget(backButton); 
  
  
    segmentedButton.layout()->addWidget(forwardButton); 
  
  
 
  
  
    QWidget win; 
  
  
    win.setLayout(new QHBoxLayout); 
  
  
    win.layout()->setSpacing(0); 
  
  
    win.layout()->setMargin(0); 
  
  
    win.layout()->setAlignment(Qt::AlignLeft); 
  
  
    win.layout()->addWidget(&segmentedButton); 
  
  
    win.show(); 
  
  
 
  
  
    return app.exec(); 
  
  
} 
 
 

The following figure shows the effect. Note: The reason why we put segmentedButton into a new widget is that Windows has a minimum value. If you call segmenedButton. show (); directly, the two buttons will not be together due to the minimum value. Using this technology, we can easily create beautiful interfaces. The key to this technology lies in the preparation of image materials and the delivery of most of the work on the interface to the artist.

This article is from the "bean space" blog, please be sure to keep this source http://devbean.blog.51cto.com/448512/487888