62 界面外观（Qt样式表）

Qt样式表是一个强大的机制，允许您自定义小部件的外观，除了已经可以通过子类化Qstyle来实现。Qt样式表的概念，术语和语法深受HTML 级联样式表（CSS）的启发，但适用于部件的世界。

• 可以使用QApplication::setStyleSheet()函数将其设置到整个应用程序上；
• 也可以使用QWidget::setStyleSheet()函数将其设置到一个指定的部件（还有它的子部件）上。
• 如果在不同的级别都设置了样式表，那么Qt会使用所有有效的样式表，这被称为样式表的层叠。

    // 设置pushButton的背景为黄色
    ui->pushButton->setStyleSheet("background:yellow");
    // 设置horizontalSlider的背景为蓝色
    ui->horizontalSlider->setStyleSheet("background:blue");

 

这样调用指定部件的setStyleSheet()函数只会对这个部件应用该样式表，如果想对所有的相同部件都使用相同的样式表，那么可以在它们的父部件上设置样式表。比如这里两个部件都在MainWindow上，可以为MainWindow设置样式表：

  setStyleSheet("QPushButton{background:yellow}QSlider{background:blue}");

这样，以后再往主窗口上添加的所有QPushButton部件和QSlider部件的背景色都会改为这里指定的颜色。

如果要设置全部背景则：

  setStyleSheet("*{background:blue}");

样式表使用方法

样式表是可以在整个应用程序中使用QApplication :: setStyleSheet（）或使用QWidget :: setStyleSheet（）在特定小部件（及其子）上设置样式表。如果设置了不同级别的样式表，Qt从所有样式表中选择最终有效的方式进行显示，这被称为级联。

样式表的设置方式有两种，一种是使用代码设置，另外是在设置模式中设置样式表。

在设计模式使用样式表

进入设计模式。在界面上点击鼠标右键，在弹出的菜单中选择“改变样式表”，这时会出现编辑样式表对话框，在其中输入如下代码：

QPushButton{

}

注意光标留在第一个大括号后。然后点击上面“添加颜色”选项后面的下拉箭头，在弹出的列表中选择“background-color”一项。      这时会弹出选择颜色对话框，大家可以随便选择一个颜色，然后点击“确定按钮”，这时会自动添加代码：

QPushButton{
    background-color: rgb(0, 85, 255);
}

根据选择的颜色不同，rgb()中的参数的数值也会不同。可以看到，在这里设置样式表不仅很便捷而且很直观，不仅可以设置颜色，还可以使用图片，使用渐变颜色，或者更改字体。相似的，可以再设置QSlider的背景色。

样式表语法

样式表包含了一系列的样式规则，一个样式规则由一个选择器（selector）和一个声明（declaration）组成。选择符指定了受该规则影响的部件；声明指定了这个部件上要设置的属性。例如：

QPushButton{
    color:red
};

在这个样式规则中，QPushButton是选择器，{color:red}是声明，而color是属性，red是值。这个规则指定了QPushButton和它的子类应该使用红色作为它们的前景色。

Qt样式表中一般不区分大小写，例如color、Color、COLOR和COloR表示相同的属性。只有类名，对象名和Qt属性名是区分大小写的。 一些选择器可以指定相同的声明，只需要使用逗号隔开，例如：

QPushButton,QLineEdit,QComboBox{color:red};

相当于这三条规则的序列：

QPushButton {color:red};
QLineEdit   {color:red};
QComboBox   {color:red};

一个样式规则的声明部分是一些“属性:值”对组成的列表，它们包含在大括号中，使用分号隔开。例如：

QPushButton{color:red;background-color:white}

选择器类型

Qt样式表支持在CSS2中定义的所有选择器。下表列出了最常用的选择器类型。

子控件

对一些复杂的部件修改样式，可能需要访问它们的子控件，例如QComboBox的下拉按钮，还有QSpinBox的向上和向下的箭头等。选择器可以包含子控件来对部件的特定子控件应用规则，例如：

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

这样的规则可以改变所有的QComboBox部件的下拉按钮的样式。

伪状态

选择器可以包含伪状态来限制规则在部件的指定的状态上应用。伪状态出现在选择器之后，用冒号隔离，例如：

QPushButton:hover{color:white}

这个规则表明当鼠标悬停在一个QPushButton部件上时才被应用。伪状态可以使用感叹号来表示否定，例如要当鼠标没有悬停在一个QRadioButton上时才应用规则，那么这个规则可以写为：

QRadioButton:!hover{color:red}

伪状态还可以多个连用，达到逻辑与效果，例如当鼠标悬停在一个被选中的QCheckBox部件上时才应用规则，那么这个规则可以写为：

QCheckBox:hover:checked{color:white}

如果有需要，也可以使用逗号来表示逻辑或操作，例如：

QCheckBox:hover,QCheckBox:checked{color:white}

实例：

    setStyleSheet("\
        QPushButton{background:yellow} QTextEdit{background:red} \
        QPushButton,QLineEdit,QComboBox{color:red}  \
        QPushButton[flat=\"true\"]{background:blue}  \
        QPushButton#pushButton_ok{background:black} \
        QComboBox::drop-down{image:url(:/image/dropdown.png);background:white}\
        QRadioButton:!hover {color:red} QCheckBox:hover:checked{color:white} \
        QPushButton{qproperty-iconSize: 32px 32px}\
     ");

冲突解决

当几个样式规则对相同的属性指定了不同的值时就会产生冲突。例如：

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

这样okButton的color属性便产生了冲突。解决这个冲突的原则是：特殊的选择器优先。在这里，因为QPushButton#okButton一般代表一个单一的对象，而不是一个类所有的实例，所以它比QPushButton更特殊，那么这时便会使用第一个规则，okButton的文本颜色为灰色。    

相似的，有伪状态比没有伪状态优先。如果两个选择器的特殊性相同，则后面出现的比前面的优先。Qt样式表使用CSS2规范来确定规则的特殊性。

类似地，具有伪状态的选择器比不指定伪状态的选择器更具体。因此，以下样式表指定当鼠标悬停在其上时，QPushButton应该有白色文本，否则为红色文本：

QPushButton：hover {color：white}
QPushButton {color：red}

在这里，两个选择器具有相同的特性，后面的会覆盖前面的。

QPushButton：hover {color：white}
QPushButton ：hover {color：red}

级联

可以在QApplication，父窗口小部件和子窗口小部件上设置样式表。通过合并在小部件的祖先（父，祖父母等）上设置的样式表，以及在QApplication上设置的任何样式表，可以获得任意小部件的有效样式表。当发生冲突时，小部件自己的样式表始终优先于任何继承的样式表，而不考虑冲突规则的特殊性。同样，父窗口小部件的样式表比祖父母更喜欢。

这样做的一个结果是，在小部件上设置样式规则会自动使其优先于在祖先小部件的样式表或QApplication样式表中指定的其他规则。考虑下面的例子。首先，我们在QApplication上设置一个样式表：

qApp - > setStyleSheet（“QPushButton {color：white}”）;

然后我们在QPushButton对象上设置样式表：

myPushButton - > setStyleSheet（“* {color：blue}”）;

QPushButton上的样式表强制QPushButton（和任何子部件）具有蓝色文本，尽管应用程序范围样式表提供了更具体的规则集。

如果我们写了，结果也是一样的

myPushButton - > setStyleSheet（“color：blue”）;

除了如果QPushButton有孩子（这不太可能），样式表将不会对他们造成影响。

继承

当使用Qt样式表，一个小部件并不会自动从其父继承控件的字体和颜色设置。

例如，考虑一个QGroupBox中的QPushButton：

qApp - > setStyleSheet（“QGroupBox {color：red;}”）;

该QPushButton没有一个明确的颜色设置。因此，它不是继承父QGroupBox的颜色，而是具有系统颜色。如果我们想要设置QGroupBox及其子项的颜色，我们可以这样写：

qApp - > setStyleSheet（“QGroupBox，QGroupBox * {color：red;}”）;

设置QObject属性

4.3和更高版本中，可以使用qproperty- <property name>语法设置任何可设计的Q_PROPERTY。

MyLabel { qproperty-pixmap: url(pixmap.png); }
MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }
QPushButton { qproperty-iconSize: 20px 20px; }

使用QSS文件

    QFile file(":/styleSheet/styleSheet.qss");
    if(file.open(QFile::ReadOnly))
    {
        qApp->setStyleSheet(file.readAll());
        file.close();
        qDebug() << "Open File Successfully!!!";
    }
    else
        QMessageBox::about(NULL, "Test", "Open File Failed");