Qt | 关于样式表的使用 QStyleSheet

前言：

Qt 样式表是一个可以自定义部件外观的十分强大的机制，样式表可以使用 QApplication::setStyleSheet()函数将其设置到整个应用程序上，也可以使用 QWidget::setStyleSheet()函数将其设置到一个指定的部件（还有它的子部件）上。

如果在不同的级别都设置了样式表，那么 Qt 会使用所有有效地样式表，即样式表的层叠。

设置样式表：

1.给指定部件设置样式表：

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

通过指定部件的 setStyleSheet()函数就只会对这个部件应用这个样式。

2.对所有的相同部件使用相同的样式：

//在父窗体上调用setStyleSheet()函数this->setStyleSheet("QPushButton{background:yellow}QSlider{background:blue}");

这样，父窗体上的所有的 QPushButton 部件和 QSlider 部件的背景颜色都会为我们设置的颜色。

通过这种方式可以对 QListWidget 中的 Item 进行统一样式设置：

"QListWidget{border:0px;background-color:#FFFFFF;outline:0px;}QListWidget::Item {background:#FFFFFF;}QListWidget::Item:hover {background:#EEEEEE;}QListWidget::item:selected {background:#DDDDDD;}QListWidget::item:selected:!active {background:#FFFFFF;}"

3.设置父部件的样式，并且子部件不继承：

//父部件为一个QWidetthis->setObjectName("myWidget");this->setStyleSheet(QWidget#myWidget{background:black});

这里的 setObjectName("myWidget")是用来设置父部件的名称，在 setStyleSheet()函数中通过指定“#myWidget”指定我们设置的样式只应用在 myWidget 上，它里面的子部件不会继承父部件的样式。

这个方法还可以和方法 2 一起用，即调用父部件的 setStyleSheet()函数，在参数中除了可以写父部件的样式，还可以指定子部件的 objectName,对子部件进行设置。

4.在 main 函数中调用 QApplication::setStyleSheet()对程序进行样式设置：

直接在 main 函数中调用：qApp->setStyleSheet();参数为部件的样式，这种方法可以实现调用 qss 文件，实现样式设置。

QFile qss(":/qss/style.qss");qss.open(QFile::ReadOnly);qApp->setStyleSheet(qss.readAll());qss.close();

style.qss 文件中的设置如图：

这样，整个程序中的 QScrollBar 都将会上图设置的样式，这个方法适合进行样式统一，减少代码量。

Qt 样式表语法：

Qt 样式表的术语和语法规则与 HTML CSS 基本相同。

1.样式规则：

样式表包含了一系列的样式规则，每个样式规则由选择器（selector）和声明（declaration）组成。

• 选择器指定了受该规则影响的部件；

• 声明指定了这个部件上要设置的属性；例：QPushButton{color:red}

• QPushButton 是选择器；

• {color:red}是声明，其中，color 是属性，red 是属性的值。

一些选择器可以指定相同的声明，选择器中间用逗号隔开。

例如：QPushButton,QLineEdit,QComboBox{color:red}

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

例如：QPushButton{color:red;background-color:white}

可以在 Qt Style Sheets Reference 关键字对应的帮助文档中的 List of Properties 一项中查看 Qt 样式表支持的所有属性。

2.子控件：

对一些复杂的部件修改样式，可能需要访问它们的子控件，比如 QComboBox 的下拉按钮、QSpinBox 的向上和向下箭头等。选择器可以包含子控件来对部件的特定子控件设置样式。

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

在 Qt Style Sheets Reference 关键字对应的帮助文档中的 List of Stylabel Widgets 一项中列出了所有可以使用的样式表来自定义样式的 Qt 部件， List of Sub-Controls 一项中列出了所有可用的子控件。

3.伪状态：

• 选择器可以包含伪状态来限制规则在部件的指定状态上的应用。伪状态出现在选择器之后，用冒号隔开。例如：QPushButton:hover{color:white}；表明当鼠标悬停在 QPushButton 上时，颜色为白色。

• 伪状态可以用感叹号来表示否定。例如：QRadioButton:!hover{color:red}；表明当鼠标没有悬停在 QRadioButton 上时，颜色为红色。

• 伪状态可以多个连用，达到逻辑与的效果。例如：QCheckBox:hover:checked{color:white};表明当鼠标悬停在一个被选中的 QCheckBox 部件上时颜色才为白色。

• 伪状态可以用逗号表示逻辑或操作。例如：QCheckBox:hove, QCheckBox:checked{color:white};表明当鼠标悬停在 QCheckBox 上时为白色，或者当 QCheckBox 为选中状态时为白色。

• 伪状态可以和子控件联合使用。例如：QComboBox::drop-down:hover{image:url(dropdown.png)};表明当鼠标悬停在 QComboBox 的下拉按钮上时，下拉按钮的图片为 dropdown.png。

4.冲突解决：

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

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

这时，okButton 的 color 属性就产生了冲突。解决冲突的原则是：

• 特殊的选择器优先。

• 有伪状态比没有伪状态优先。

• 部件自己的样式表优先于任何继承的样式表，父部件的样式表优先于祖先的样式表。所以 okButton 最后为灰色。

5.层叠：

样式表可以设置在 QApplication 上、父部件上或者子部件上。部件有效地样式表是通过部件祖先的样式表和 QApplication 上的样式表合并得到的。

当发生冲突时，部件自己的样式表优先于任何继承的样式表，同样的，父部件的样式表优先于祖先的样式表。

6.继承：

当使用 Qt 样式表时，部件并不会自动从父部件继承字体和颜色（color）设置。例如，一个 QPushButton 包含在一个 QGroupBox 中，这里对 QGroupBox 设置颜色为红色，但是不对 QPushButton 设置样式表。这时，QPushButton 会使用系统颜色，而不会继承 QGroupBox 的颜色。

有些属性是有继承性的，有些属性是没有继承性的。