【QT】QT从零入门教程(十六)：QSS样式表

  实现一个软件的基本界面和功能后，接下来要做的就是美化界面，这就用到了QSS样式表。

  QSS包含了一个样式规则序列，一个样式规则由一个选择器和声明组成，选择器指定哪些部件由规则影响，声明指定哪些属性应该在部件上进行设置。例如：

QPushButton { color: red }

  其中QPushButton是选择器，{ color: red }是声明，该规则指定QPushButton及其子类（例如：MyPushButton）应使用红色作为前景色。QSS通常不区分大小写（即：color、Color、COLOR、cOloR指同一属性），唯一例外就是类名（class names）、对象名（object names）、属性名（property names）区分大小写。

  几个选择器可以指定相同的声明，使用逗号（,）来分隔选择器。例如：

QPushButton, QLineEdit, QComboBox { color: red; background-color: white }

---

  对于样式复杂的部件，需要访问子控件，例如：QComboBox的下拉按钮或QSpinBox的上下箭头。选择器可能包含子控件，使得可以限制特有部件子控件的应用规则。例如：

QComboBox::drop-down { image: url(dropdown.png) }

  上述规则指定了QComboBoxe下拉按钮样式，虽然双冒号（::）语法让人想起CSS3伪元素，但Qt子控件从概念上讲有不同的级联语义。

---

  当样式中指定相同的属性具有不同的值时，就会出现冲突。如下所示，okButton的特定属性和QPushButton 的通用属性不同，这时okButton所指定的属性则是color: gray。

QPushButton#okButton { color: gray }
QPushButton { color: red }

---

使用示例

QPushButton *button = new QPushButton();
button->setObjectName("okButton");
okButton->setStyleSheet("background-color:blue;"); //设置背景颜色

---

黑色样式表QSS (这里引用了Github的qss-dracula)

/*
 * TODO: Search buttons color (Replace, Replace and continue search)
 */

/*
 * Drop background color of most widgets
 */

QWidget, QStackedWidget,
QScrollArea, QAbstractScrollArea {
    background-color: transparent;
}

QApplication,
QMainWindow, /*QFrame,  */QDockWidget, QDialog, QFileDialog, QMessageBox,
QRadioButton,
QGroupBox::title, /* Need to set background becase must clear border behind label */
QMenuBar, QMenu, QMenu::item,
QComboBox QAbstractItemView,
QTreeView, QListWidget, QListView, QTableWidget, QTableView,
QTextEdit, QTextBrowser {
    background-color: #3c3f41; /*#004100;*/
    color: #bbbbbb;
}

/*
 * This is default values
 * Edit first if you want change appearance
 */

/****自定义*****/

QPushButton#customButton {
    min-height: 1.2em; 
    min-width: 1.2em; 
    outline: 0;    
    border: 1px solid #5f6161;
    border-radius: 2px;
    background-color: rgba(100, 100, 100, 0.05);
}
/*
QFrame#customFrame {
    border: 0px solid transparent;
    background-color: transparent;
} */

QDialog {
    border:1px solid #4b6eaf;
}

/****END*****/


QLabel, QTabBar::tab, QMenuBar::item,
QCheckBox, QGroupBox {
    background-color: transparent;
    color: #bbbbbb;
    selection-color: #bbbbbb;
}

/*
 * GroupBox and CheckBox
 *
 * TODO: ::indicator:indeterminate icons
 */

QGroupBox {
    border-top: 1px solid #2d2d2d;
    margin-top: 0.5em;
}
QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top left;
    padding: 0 3px;
}
QCheckBox::indicator,
QGroupBox::indicator {
    width: 13px;
    height: 13px;
}
QCheckBox::indicator:unchecked,
QGroupBox::indicator:unchecked {
    image: url(:/qmldesigner/images/checkbox_unchecked.png);
}
QCheckBox::indicator:unchecked:hover,
QGroupBox::indicator:unchecked:hover {
    image: url(:/qmldesigner/images/checkbox_unchecked_hover.png);
}
QCheckBox::indicator:unchecked:pressed,
QGroupBox::indicator:unchecked:pressed {
    image: url(:/qmldesigner/images/checkbox_unchecked_pressed.png);
}
QCheckBox::indicator:checked,
QGroupBox::indicator:checked {
    image: url(:/qmldesigner/images/checkbox_checked.png);
}
QCheckBox::indicator:checked:hover,
QGroupBox::indicator:checked:hover {
    image: url(:/qmldesigner/images/checkbox_checked_hover.png);
}
QCheckBox::indicator:checked:pressed,
QGroupBox::indicator:checked:pressed {
    image: url(:/qmldesigner/images/checkbox_checked_pressed.png);
}
QCheckBox::indicator:indeterminate:hover,
QGroupBox::indicator:indeterminate:hover {
    background-color: #2222bb;
    image: url(:/qmldesigner/images/checkbox_indeterminate_hover.png); /* TODO: There is no shuch image */
}
QCheckBox::indicator:indeterminate:pressed,
QGroupBox::indicator:indeterminate:pressed {
    background-color: #22bb22;
    image: url(:/qmldesigner/images/checkbox_indeterminate_pressed.png); /* TODO: There is no shuch image */
}


QLineEdit, QAbstractSpinBox, QComboBox, QPushButton {
    background-color: #45494a;
    /*background-color: rgba(255, 255, 255, 0.05);*/

    backgr