有关于QT样式表的一些知识（使用方法和编写语法）

一、QT样式表的介绍

     QT样式表文件.qss类似于层叠式样式表，样式表文件能够减少项目中源原件的代码量，源代码中不必再对每个控件的样式进行设置。而且样式表是一个独立的文件，其非常便于修改，对大型工程项目的统一界面风格设计和修改都很便利。

     本文仅对样式表的基础语法做一个简单的介绍，由于受实际使用时的项目经验限制，不是很全面。另，文后附一个使用实例，可供参考。

二、使用方法

1. 先建立文本文件，书写样式表，编写完毕后重命名为.qss文件
2. 在项目中添加Qt资源文件.qrc文件。如source.qrc，把样式表文件加入到资源文件中，此处注意prefix最好为"/"，否则在调用qss文件时会找不到文件。例如在项目文件夹下创建一个source文件夹，把所有样式表用到的图片都放入这个目录下，样式表文件和资源文件也都放在这个目录下。现在在资源文件中加入qss文件路径：

         

             

            arrow_down_normal.png

               ... ...

            source.qss

             ... ...

         

     

   3.在main函数中通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后

      qApp->setStyleSheet就可以使qss生效。

      代码如下：

      QApplication app(argc, argv);

      QFile qss("source.qss");
      qss.open(QFile::ReadOnly);
      app.setStyleSheet(qss.readAll());
      qss.close();

三、基础语法

  1.   一个样式表由一系列的样式规则构成。每个样式规则都如下形式：
    selector { attribute: value }

    selector部分通常是一个类名(例如QComboBox)，也就是一种部件的名称；属性(attribute)部分是一个样式表属性的名字（如背景色，边框大小，字体等），值(value)部分是赋给该属性的值（颜色，大小等的值）。

      也可以同时给多个部件定义，如下：

      selector1, selector2, ..., selectorM {
      attribute1: value1;
      attribute2: value2;
      ...
      attributeN: valueN;
      }

2. 另外介绍一下方箱模型

      在样式表中，每个部件都被看作是一个由四个同心相似的矩形组成的箱体：空白(margin)、边框(border)、填充(padding)和内容(content)。对于一个平面部件——例如一个空白、边框和填充都是0像素的部件——而言，这四个矩形是完全重合的。
空白区域位于边框外，并且总是透明的。边框为部件提供了四周的框架，其border-style属性可以设置为一些内置的框架风格，如inset、outset、solid和ridge。填充在边框和内容区域之间提供了空白间隔。

3. 伪状态的设置     

      定义界面元素不同的状态所展现的样式称为“伪状态样式”。伪状态和部件使用：来表示。伪状态的书写格式为：

      Selector：状态 { attribute: value }

      例如：  

      QPushButton:disabled {

        padding-left: 4px;

        padding-top: 4px;

        background-color: gray；

      }

     伪状态主要有：

     :checked    button部件被选中
     :disabled    部件被禁用
     :enabled    部件被启用
     :focus    部件获得焦点
     :hover    鼠标位于部件上
     :indeterminate    checkbox或radiobutton被部分选中
     :off    部件可以切换，且处于off状态
     :on    部件可以切换，且处于on状态
     :pressed    部件被鼠标按下
     :unchecked    button部件未被选中

4.子部件的设置

      许多部件都有子部件，如QComboBox的下拉箭头，子部件和主部件使用::来表示。格式为：

     Selector::子部件{ attribute: value }

     如果还要用到伪状态则：Selector：：子部件：伪状态{ attribute: value }

     子部件有：

     ::down-arrow    combo box或spin box的下拉箭头
     ::down-button    spin box的向下按钮
     ::drop-down    combo box的下拉箭头
     ::indicator    checkbox、radio button或可选择group box的指示器
     ::item    menu、menu bar或status bar的子项目
     ::menu-indicator    push button的菜单指示器
     ::title    group box的标题
     ::up-arrow    spin box的向上箭头
     ::up-button    spin box的向上按钮

5.其他

     qss的注释支持" /* */"，不支持“//"，如果使用了"//"进行注释，可能导致该符号后面的样式表设置内容全部失效。

 

四、一个样式表实例

QDialog {
    border: 2px solid #5BBDBE;  /*边框：2px,实线，色号*/
    /*border-radius: 6px;*/
}

/*窗口中的可滚动区域*/
QScrollArea {
    border: 2px solid #5BBDBE;
    border-radius: 4px;  /*边框半径用于实现圆角矩形样式*/
}


QGroupBox {
    border: 2px solid #5BBDBE;
    border-radius: 5px;
    margin-top: 1ex; /* leave space at the top for the title */
}

QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top left; /* position at the top center */
    left: 20px;
}


QTabWidget::pane { /* The tab widget frame */
    margin: 0px;
    border-left: 2px solid #5BBDBE;
    border-bottom: 2px solid #5BBDBE;
    border-top: 2px solid #5BBDBE;
    border-right: 2px solid #5BBDBE;
    border-radius: 4px;
    position: absolute;
    top: -2px;
}

QTabWidget::tab-bar {
    left: 0px; /* move to the right by 5px */
}

/* Style the tab using the tab sub-control. Note that
    it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
    color: #FFFFFF;
    background: #018E88;
    border: 2px solid #5BBDBE;
    border-bottom-color: #5BBDBE; /* same as the pane color */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    min-width: 8ex;
    padding: 2px;
}
/*鼠标悬浮tab页面上*/
QTabBar::tab:hover {
    color: #018E88;     /*前景色*/
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #DDEDED, stop: 1.0 #EEF6F6);
}   /*背景色为渐变色，从stop:0至stop:1.0渐变*/
/*被选择的tab页面*/
QTabBar::tab:selected {
    color: #018E88;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #DDEDED, stop: 1.0 #EEF6F6);
    border-color: #5BBDBE;
    border-bottom-color: #EEF6F6; /* same as pane color */
}
/*未被选的tab页面*/
QTabBar::tab:!selected {
    margin-top: 2px; /* make non-selected tabs look smaller */
}

/* make use of negative margins for overlapping tabs */
QTabBar::tab:selected {
    /* expand/overlap to the left and right by 4px */
    margin-left: -2px;
    margin-right: -2px;
}

QTabBar::tab:first {
    margin-left: 30;
}

QTabBar::tab:last:selected {
    margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
}

QTabBar::tab:only-one {
    margin: 0; /* if there is only one tab, we don't want overlapping margins */
}


QPushButton {
    /*border: 2px solid #30A29F*/;
    border: none;
    padding: 2px 2px 2px 2px;
    border-radius: 6px;
    color: #FFFFFF;
    background-color: #30A29F;
    min-width: 70px;
    min-height: 25px;
}
QPushButton:disabled {
    padding-left: 4px;
    padding-top: 4px;

    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #EEF6F6, stop: 1 #000000);
}
QPushButton:pressed {
    padding-left: 4px;
    padding-top: 4px;
    color: #30A29F;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #EEF6F6, stop: 1 #FFFFFF);
}

QPushButton:hover {
    color: #30A29F;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #BEDDDE, stop: 1 #E7F2F2);
}

QPushButton:flat {
    border: none; /* no border for a flat push button */
}

QPushButton:default {
    border-color: navy; /* make the default button prominent */
}


QTreeView {
    border: 1px solid #5BBDBE;
    show-decoration-selected: 1;
    background-color:#FFFFFF;
    selection-color: #000000;
    selection-background-color:#FFFFFF;
    font-size: 12pt;
}

QTreeView::item {
    border: 1px solid #FFFFFF;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

QTreeView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #DDEDED, stop: 1 #EEF6F6);
    border: 1px solid #BEDDDE;
}

QTreeView::item:selected {
    border: 1px solid #BEDDDE;
}

QTreeView::item:selected:active{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BEDDDE, stop: 1 #E7F2F2);
}

QTreeView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BEDDDE, stop: 1 #E7F2F2);
}

/*表格样式*/
QTableView {
    border: 1px solid #5BBDBE;
    show-decoration-selected: 1;
    background-color:#F4F4F4;
    alternate-background-color:#EAEAEA; /*行颜色交替变化*/
    selection-color: #000000;
    selection-background-color:#BEDDDE;
    font-size: 14pt;
}


QTableView::item {
    border: 1px solid #FFFFFF;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

QTableView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #DDEDED, stop: 1 #EEF6F6);
    border: 1px solid #BEDDDE;
}

QTableView::item:selected {
    color: #018E88;
    border: 1px solid #BEDDDE;
}

QTableView::item:selected:active{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BEDDDE, stop: 1 #E7F2F2);
}

QTableView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BEDDDE, stop: 1 #E7F2F2);
}

QTableView QTableCornerButton::section {
    border: 0px;
    background-color: #8D8D8D;
}


QHeaderView::section {
    background-color: #018E88;
    color: white;
    font-size: 14pt;
    min-width: 25px;
    min-height: 25px;

    padding-left: 0px;
    border: 0px solid #018E88;
}

QHeaderView::section:checked
{
    background-color: #018E88;
}

/* style the sort indicator */
QHeaderView::down-arrow {
    image: url(./source/arrow_down_normal.png);
}

QHeaderView::down-arrow:hover {
    image: url(./source/arrow_down_press.png);
}

QHeaderView::up-arrow {
    image: url(./source/arrow_up_normal.png);
}

QHeaderView::up-arrow:hover {
    image: url(./source/arrow_up_press.png);
}


QScrollBar:horizontal {
    border: 2px solid #018E88;
    background: #018E88;
    height: 20px;
    margin: 0 22px 0 22px;
}

QScrollBar::handle:horizontal {
    border-radius: 6px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E5E5E5, stop: 1 #DADADA);
    min-width: 20px;
}

QScrollBar::handle:horizontal:hover {
    border-radius: 6px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #DADADA, stop: 1 #018E88);
    min-width: 20px;
}

QScrollBar::handle:horizontal:pressed {
    border-radius: 6px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #B8B8B8, stop: 1 #A3A3A3);
    min-width: 20px;
}

QScrollBar::add-line:horizontal {
    border: 2px solid #018E88;
    background: #018E88;
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
    border: 2px solid #018E88;
    background: #018E88;
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}

QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    border: 2px solid #018E88;
    border-radius: 6px;
    width: 10px;
    height: 10px;
    background: #E5E5E5;
}

QScrollBar:left-arrow:horizontal:hover, QScrollBar::right-arrow:horizontal:hover {
    border: 2px solid #018E88;
    border-radius: 6px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}


QScrollBar:vertical {
    border: 2px solid #018E88;
    background: #018E88;
    width: 20px;
    margin: 22px 0 22px 0;
}
QScrollBar::handle:vertical {
    border-radius: 6px;
    background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #E5E5E5, stop: 1 #DADADA);
    min-height: 20px;
}

QScrollBar::handle:vertical:hover {
    border-radius: 6px;
    background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #DADADA, stop: 1 #018E88);
    min-height: 20px;
}

QScrollBar::handle:vertical:pressed {
    border-radius: 6px;
    background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #B8B8B8, stop: 1 #A3A3A3);
    min-height: 20px;
}

QScrollBar::add-line:vertical {
    border: 2px solid #018E88;
    background: #018E88;
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical {
    border: 2px solid #018E88;
    background: #018E88;
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}

QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
    border: 2px solid #018E88;
    border-radius: 6px;
    width: 10px;
    height: 10px;
    background: #E5E5E5;
}

QScrollBar::up-arrow:vertical:hover, QScrollBar::down-arrow:vertical:hover {
    border: 2px solid #018E88;
    border-radius: 6px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
}

QComboBox:disabled {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #EEF6F6, stop: 1 #000000);
}
QComboBox {
    border: 2px solid #018E88;
    border-radius: 6px;
    padding: 1px 1px 1px 1px;
    min-height: 25px;
    color: #FFFFFF;
    background-color: #018E88;
}

QComboBox:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #01BFB6, stop: 1.0 #02E3D7);
}

QComboBox:on { /* shift the text when the popup opens */
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #01BFB6, stop: 1.0 #02E3D7);
    padding-top: 3px;
    padding-left: 3px;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;

    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
    border-top-right-radius: 3px; /* same radius as the QComboBox */
    border-bottom-right-radius: 3px;
}


QComboBox::down-arrow {
    image: url(./source/arrow_down_normal.png);
}

QComboBox::down-arrow:on { /* shift the arrow when popup is open */
    image: url(./source/arrow_down_press.png);
    top: 1px;
    left: 1px;
}

QComboBox QAbstractItemView {
    show-decoration-selected: 1;
    background-color:#BEDDDE;
    alternate-background-color:#BEDDDE;
    selection-color: #000000;
    selection-background-color:#BEDDDE;
    outline: none;
    font-size: 12px;
    border: 2px solid #018E88;
}
QDateEdit:disabled {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #EEF6F6, stop: 1 #000000);
}
QDateEdit {
    border: 2px solid #018E88;
    border-radius: 6px;
    padding: 1px 1px 1px 1px;
    min-height: 25px;
    color: #FFFFFF;
    background-color: #018E88;
}

QDateEdit:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #01BFB6, stop: 1.0 #02E3D7);
}

QDateEdit:on { /* shift the text when the popup opens */
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #01BFB6, stop: 1.0 #02E3D7);
    padding-top: 3px;
    padding-left: 3px;
}

QDateEdit::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;

    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
    border-top-right-radius: 3px; /* same radius as the QComboBox */
    border-bottom-right-radius: 3px;
}


QDateEdit::down-arrow {
    image: url(./source/arrow_down_normal.png);
}

QDateEdit::down-arrow:on { /* shift the arrow when popup is open */
    image: url(./source/arrow_down_press.png);
    top: 1px;
    left: 1px;
}

QDateEdit QAbstractItemView {
    show-decoration-selected: 1;
    background-color:#BEDDDE;
    alternate-background-color:#BEDDDE;
    selection-color: #000000;
    selection-background-color:#BEDDDE;
    outline: none;
    font-size: 12px;
    border: 2px solid #018E88;
}

QLineEdit {
    border: 2px solid #018E88;
    border-radius: 10px;
    padding: 1px 1px 1px 1px;
    color: #000000;
    background: #EAEAEA;
    selection-color: #000000;
    selection-background-color: #018E88;
    min-height: 25px;
}

QTextEdit {
    border: 2px solid #018E88;
    border-radius: 10px;
    padding: 1px 1px 1px 1px;
    color: #000000;
    background: #EAEAEA;
    selection-color: #000000;
    selection-background-color: #018E88;
    min-height: 25px;
}

QCheckBox {
    spacing: 5px;
}

QCheckBox::indicator {
    width: 24px;
    height: 24px;
}

QCheckBox::indicator:unchecked {
    image: url(./source/checkbox_unchecked.png);/*使用自定义的图像*/
}

QCheckBox::indicator:unchecked:hover {
    image: url(./source/checkbox_unchecked_hover.png);
}

QCheckBox::indicator:unchecked:pressed {
    image: url(./source/checkbox_unchecked_pressed.png);
}

QCheckBox::indicator:checked {
    image: url(./source/checkbox_checked.png);
}

QCheckBox::indicator:checked:hover {
    image: url(./source/checkbox_checked_hover.png);
}

QCheckBox::indicator:checked:pressed {
    image: url(./source/checkbox_checked_pressed.png);
}

/*
QCheckBox::indicator:indeterminate:hover {
    image: url(./source/checkbox_indeterminate_hover.png);
}

QCheckBox::indicator:indeterminate:pressed {
    image: url(./source/checkbox_indeterminate_pressed.png);
}
*/

QRadioButton {
    spacing: 5px;
}

QRadioButton::indicator {
    width: 24px;
    height: 24px;
}

QRadioButton::indicator::unchecked {
    image: url(./source/radiobutton_unchecked.png);
}

QRadioButton::indicator:unchecked:hover {
    image: url(./source/radiobutton_unchecked_hover.png);
}

QRadioButton::indicator:unchecked:pressed {
    image: url(./source/radiobutton_unchecked_pressed.png);
}

QRadioButton::indicator::checked {
    image: url(./source/radiobutton_checked.png);
}

QRadioButton::indicator:checked:hover {
    image: url(./source/radiobutton_checked_hover.png);
}

QRadioButton::indicator:checked:pressed {
    image: url(./source/radiobutton_checked_pressed.png);
}