2017/12/27 9:32:00

QSS: From basic to performance

• Introduction
• QSS Basic
• QSS Advanced
• QSS Usage
• QSS Performance
  • QSS profiling
  • QSS fine-tune
• Appendix

Introduction

Qt Style Sheets are a powerful mechanism that allows you to customize the appearance of widgets, in addition to what is already possible by subclassing QStyle. As usual, we always write QSS style sheet into a file to reduce the coupling and switch the style easily. However, some software doesn't provide style switch function, such as QtCreator. It embeds the style into the code in order to improve the performance.

QSS basic

QSS Syntax

As CSS, the syntax of QSS is:

selector {property:value}

For multiple properties, we can separate them with semicolon:

selector {
    property1: value;
    property2: value;
}

For C++ code, we can load the QSS by:

object->setStyleSheet( style );

QSS Advanced

Selector Types

QSS support all the selectors defined in CSS2. Here are some examples:

1. Universal selector *: Matches all widgets.
2. Type Selector(QPushButton): Matches instances of QPushButton and its subclasses.
3. Property Selector(QPushButton[flat="false"]): Matches instances of QPushButton that are not flat.
4. Class Selector(.QPushButton): Matches instances of QPushButton, but not of its subclasses.
5. ID Selector(QPushButton#okButton): Matches all QPushButton instances whose object name is okButton.
6. Descendant Selector(QDialog QPushButton): Matches all instances of QPushButton in QDialog.
7. Child selector(QDialog > QPushButton): Matches all instances of QPushButton that are direct children of a QDialog.

Sub-Controls

We can also specify the subcontrols of the widget, such as drop-down button of a QComboBox:

QComboBox::drop-down {
    subcontrol-origin: margin;
}

Pseudo-States

Also, we can specify the style of the widget state, such as:

QPushButton:hover { color: white }

There also have some important topic of QSS, such as Conflict Resolution, Cascading, Inheritance and Widgets inside C++ namespaces, for these details, you can refer to QSS-stylesheet.

QSS Usage

Qt Style Sheets support various properties, pseudo-states, and subcontrols that make it possible to customize the look of widgets. You can find the reference in Qt Style Sheets Reference and the example in Qt Style Sheets Examples. Here is a dark style for a simple text editor:

Dark Scheme

The code will list later.

QSS Performance

Unfortunately, QSS suffers a lot of performance problem to use. Stackoverflow has given a full analysis on QSS performance. The fastest way is to set the style sheet in code directly, Qt Creator uses this way. However, this way limits the style and make code messy. Write the code in a QSS file is the worst, but it is more flexible to use different styles.

Performance

Conclusions:

• Original: Single, large QSS file which is set for the whole application at startup before the widgets are instatiated

• Empty QSS: Using a empty QSS file (removing all the styling information) results in a startup time reduction of about 4 seconds. The UI is then drawn with the default styling and looks exactly the same as if no QSS file was set in the application at all.

• No QSS at all: This shows how much impact the styling has on the startup time. Not setting any QSS file for any widget results in a huge performance gain.
  Single example widget in global QSS: In this scenario the application-wide QSS contained only styling information for a single widget. You can see that the single widget already increases the startup time a bit (compared to an empty QSS file). This is understandable and fine.

• Single example widget directly in C++: In this scenario the same widget as before is styled but this time the styling string is read and set directly in the constructor of the mentioned widget. So there was no application-wide QSS file set. This seems to work extremely fast (only at the first glance, see below!)

• No "global" QWidget styles: I thought that I could maybe improve the performance by being more specific in the QSS file, for example, by not setting the font in a global QWidget selector but for each of the widgets separately. I just visualized the impact of commenting out the global rule. So the performance improvement could also be a font difference. But the point is that the impact of such "global" styling selectors is rather small.

• Split files: In this scenario I added separate styling information to 7 different, heavily used widgets. So again no application-wide stylesheet. You can see that the startup time is already high. I did not try to set the styling for all my widgets because this graph already shows that there is no promising performance gain anymore.

• app.setStylesheet() after widget construction: Then I had the idea to first construct all the widgets and apply the stylesheet afterwards. This actually improved the startup time BUT I did not account for such updates in some of the widgets. In order to get this approach running I would need to update some of the widgets which would reduce the gain again. But 2 seconds are not that impressive anyways.

Appendix

QSS Syntax highlight

Qtcreator QSS syntax highlight setting: Tools->Options->Environment->MIME Types->text/css->add *.qss in Patterns.

Syntax highlight

Reference

1. http://blog.csdn.net/hk2291976/article/details/51387813
2. http://blog.csdn.net/liang19890820/article/details/51992070?spm=5176.100239.blogcont62125.18.pQPTXA
3. http://blog.51cto.com/9291927/1891444
4. http://blog.csdn.net/liang19890820/article/details/51993435#%E6%96%B0%E5%BB%BAqss%E6%96%87%E4%BB%B6

Dark Theme Example

   /*****Main Window*****/
QWidget#MainWindow {
    border: 1px solid rgb(50, 50, 50);
    background: rgb(50, 50, 50);
}

/*****Menu*****/
QMenuBar {
    background: rgb(57,58,60);
    border: none;
}

QMenuBar::item {
    spacing: 4px;
    padding: 5px 10px 5px 10px;
    background: transparent;
    border-radius: 4px;
    color: rgb(227, 234, 242);
}

QMenuBar::item::!enabled {
    color: rgb(150, 150, 150);
}

QMenu {
    background: rgb(50, 50, 50);
    color: rgb(227, 234, 242);
}

QMenu::item {
    background-color: transparent;
    padding: 2px 25px 2px 20px;
    border: 1px solid transparent;
}

QMenu::item::selected {
    border-color: darkblue;
    background: rgba(100, 100, 100, 150);
}

QMenu::separator {
    height: 2px;
    background: lightblue;
    margin-left: 10px;
    margin-right: 5px;
}

/*****Treeview*****/
QTreeView {
    alternate-background-color: yellow;
    color: rgb(50, 50, 50);
    background: rgb(230, 230, 230);
    border: none;
    /* remove dotted outline */
    outline: 0;
}

QTreeView::item:hover {
    background: qlineargradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #A0A0A0, stop: 1 #F0F0F0 );
    border: 1px solid #bfcde4;
}

QTreeView::item:selected {
    border: none;
    color: rgb(50, 50, 50);
}

QTreeView::item:selected:active{
    border: none;
    background: qlineargradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #505050, stop: 1 #a0a0a0 );
}

/*****Splitter*****/
QSplitter::handle {
    image: url(images/splitter.png);
}

QSplitter::handle::horizontal {
    width: 2px;
}

QSplitter::handle::vertical {
    width: 2px;
}

/*****Tab widget*****/
QTabWidget:pane {
    border: 2px solid #505050;
}

QTabWidget::tab-bar {
    left: 5px;
}

QTabBar::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                            stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                            stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border: 3px solid #C4C4C3;
    border-bottom-color: #C2C7CB;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    min-width: 50ex;
    max-width: 50ex;
    padding: 5px;
}

QTabBar::tab:selected, QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                                stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}

QTabBar::tab:selected {
    border-color: #9B9B9B;
    border-bottom-color: #C2C7CB; /* same as pane color */
}

QTabBar::tab:!selected {
    margin-top: 2px; /* make non-selected tabs look smaller */
}

/*****QTextEdit*****/
QTextEdit {
    background-color: rgb(30, 30, 30);
    color: rgb(200, 200, 200);
    font-size: 18px;
    border: 1px solid #000000;
}

QTextEdit QScrollBar:vertical {
    height: 20px;
    width: 8px;
    background:rgba(0, 0, 0, 25%);
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top:9px;
    padding-bottom:9px;
}

QTextEdit QScrollBar::handle:vertical {
    min-height: 20px;
    width: 8px;
    background: rgb(80, 80, 80);
    border-radius: 4px;
    margin-left: 15px;
    margin-right: 15px;
}

QTextEdit QScrollBar::handle:vertical:hover {
    border-radius:4px;
    background: rgb(100, 100, 100);
}

QTextEdit QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    border-radius:4px;
    background: transparent;
}