QT踩坑：通过setstylesheet设置组件外观

---

前言

最近用QT做一些界面，子页面Widget是直接继承主Widget的，而主Widget的各种颜色背景啥的都是用的别人的CSS，导致自己new的新Widget各种背景、字体颜色不对，搞了蛮久，记录下踩坑记录。PS：我用的是纯代码

---

这一篇修改设置对象是QTableView，不过其他组件也大同小异

一、setStyleSheet简介

查了很多博客之后只有一个结论：
没有什么介绍和demo比得上官网

---

QT Style Sheets是一个很有利的工具，允许定制窗口的外观，此外还可以用子类QStyle来完成，他的语法很大比重来源于html的CSS，但是适用于窗口。

简单来说就是这个函数用于设置组件窗口的外观

二、setStyleSheet使用方法

1.基本句法

样式表语法：样式表语法基本和HTML CSS语法一致。样式表包含了样式规则序列，样式规则由一个<selector>和<declaration>组成，<selector>指定哪些窗口将会被这些规则影响，<declaration>指定哪些属性将会被设定在窗口上，例如QPushButton{color:red}。

在上面的规则中，QPushButton是<selector>，{color:red}是<declaration>，这个规则指定QPushButton和他的子类将使用红色作为前景颜色，就是字体颜色，并且对大小写没有分别，对于color，ColoR,COLOR是一样的。

几个<selector>可以同时被列出，使用逗号",“来分开各个<selector>，例如：QPushButton, QLineEdit, QComboBox { color: red };<declaration>部分包含多对属性值 对，用{}来括起来，使用分号来分开各个属性。例如QPushButton { color: red; font-family: Arial; line-height: 26px;”}

代码如下（示例）：

Qwidget->setStyleSheet(QPushButton,QLineEdit,QPlainTextEdit
						{"color: blue;"
                        "background-color: yellow;"
                        "selection-color: yellow;"
                        "selection-background-color: blue;"});

常见的selector：

部分declaration：

样式-英文	参数	样式-中文
color:	white rgb(110,110,110) #eb7350	前景颜色，字体颜色
background:	transparent	背景为透明（背景可以为图片等）
background-color:	white rgb(110,110,110) #eb7350	背景颜色（只能为颜色）
background-position:	left right center top bottom	设定图片的位置
background-image:	url() ./img/back.jpg	背景图片 ，不缩放图片大小
border-image:	url() ./img/back.jpg	背景图片，会对图片进行拉伸，平铺
border-style:	outset inset	边框样式，按下是inset
border-width:	px 边	框大小
border-radius:	px	边框弧度
border:	3px solid red px color	边框宽度以及颜色
border-color:	rgba(255, 225, 255, 30);	color 边框颜色
font-family	微软雅黑	设定字体所属家族
font:	bold 14px bold px	字体大小并加粗
font-size:	px	字体大小
font-style:	inset	字体样式
font-weight:	px	字体深浅
selection-color:	color	设定选中时候的颜色
selection-background-color:	color	设定选中时候的背景颜色

2.子控件

Qt中有一些组合的界面组件，例如QComboBox的下拉按钮或QSpinBox的上、下调节按钮，这些按钮就是子控件，子控件同样可以设置样式，子控件使用伪状态
（示例）：

table->setStyleSheet("QTableView::item { background-color: #383838; color: white }");

该处设置了QTableView的表格中每个小格子的背景色和字体颜色

---

常见的子控件：

3.伪状态

概念：selector可以包含伪状态，使得样式法则只能应用于界面组件的某个状态，也就是一种条件应用法则

格式：伪状态出现在selector的后面，用一个分号（:）隔开

基本使用：下面是当鼠标移动到QLineEdit上方时（hover），改变QLineEdit的背景色和前景色

QWidget->setStyleSheet("QLineEdit::hover { background-color: black; color: yello}");

---

伪状态取反：在伪状态前加一个感叹号。例如下面是定义了readonly属性为false的QLineEdit的背景色

伪状态串联使用：相当于“逻辑与”的计算。下面是当鼠标移动到一个被勾选了的QCheckBox组件上方时，其样式

伪状态并联使用：相当于“逻辑或”。下面表示当鼠标移动到QCheckBox上方或者QCheckBox组件被勾选时，样式都被应用

子控件使用伪状态：例如下面定义了QCheckBox的indicator在checked和unchecked两种状态下显示的图片

---

常见的伪状态：

三、setStyleSheet使用实例

1.全局使用

使用qApp的setStyleSheet函数可以为应用程序全局设置样式。例如下面为应用程序的QLineEdit组件设置样式

2.局部使用

使用QWidget::setStyleSheet函数可以为一个窗口、一个对话框、一个界面组件设置样式。例如下面为主窗口MainWindow内的QLineEdit组件设置样式

单独设置一个Object对象的样式表。这种情况无需设置selector的名称。例如下面是设置一个名为editName的QLineEdit组件的样式

3.注意事项

对于同一个组件，需要一次性设置好，否则会覆盖掉前一次设置：

btn1->setStyleSheet("QPushButton{color:red}"); //设定前景颜色，就是字体颜色
btn1->setStyleSheet("QPushButton{background:yellow}"); //设定背景颜色为黄色

btn1->setStyleSheet("QPushButton{color:red；background:yellow}");

前两句分别为设置字体为红色，设置背景为黄色。执行完第一句后，字体会变红；执行完第二句后字体颜色恢复默认，背景变为黄色，也就是说对于同一个组件连续性分开设置外观，只会以最后一次执行为准。

如果想既设置字体为红色，又设置背景为黄色，则执行第三句，将对于QPushButton的所有设置放在一个setStyleSheet里面执行

对于一个组件及其子组件和伪状态，需要一次性设置好，否则也会覆盖掉前一次设置：

1.    table->setStyleSheet("\
2.        QTableView::item { background-color: #383838; color: white } \
3.        QTableView::item:selected { background-color: #383838; color: white } \
4.        QTableView::item:hover{ background-color: #4d80e6; color: white }");
5.        
6.    table->setStyleSheet("QTableView {\
7. 			selection-color: white; selection-background-color: #4d80e6}");

上面的代码试图设置QTableView中每一项选中后背景变色，鼠标滑过item变色及QTableView本身的文字内容选中变色。实际运行中1至4行的第一次设置被第二次设置覆盖掉，导致最终只实现了文字选中后变色的功能。虽然我设置的是QTableView的不同子部件和伪状态，但是setStyleSheet始终作用在对象table上。

因此为了实现上面的最终效果，需要放在一个setStyleSheet里面实现

    table->setStyleSheet("\
        QTableView::item { background-color: #383838; color: white } \
        QTableView::item:selected { background-color: #383838; color: white } \
        QTableView::item:hover{ background-color: #4d80e6; color: white } \
        selection-color: white; selection-background-color: #4d80e6");

Tip:设置同一组件的子控件和伪状态的时候，使用空格连接两个对象，进行级联

四、附录

附上一个十六进制颜色码的网站：快速查询颜色十六进制代码