Qt样式表的使用setStyleSheet

样式表的示例

如下面这段代码，这里是指定了QWidget类的背景颜色、字体大小和名称、前景色。这个样式表会应用的QWidget类以及其子类。

QWidget{
    background-color: rgb(255,255,0);
    color: rgb(255,0,0);
    font: 12pt "宋体";
}

样式表的语法

样式法则由一个选择器(selector)和一些声明(declaration)组成，上例中，QWidget就是选择器，表明后面花括号中的样式声明应用于QWidget类及其子类。样式声明部分是延时法则列表，每个样式法则由属性和值组成，每条法则用分号结束。每条样式法则由“属性”：“值”构成，例如：

font: 12pt "仿宋"

表示font属性，字体大小位12pt，字体名称为“仿宋”。当一个属性有多个值的时候，多个值用空格隔开。

样式表支持的选择器

下面以实例说明，下图为本例所使用的控件，以及控件的对象名称和层次关系，最外层为centralwidget包含PushButton3和frame，frame中包含Pushbutton1、PushButton2以及lineEdit。

通用选择器的使用，centralwidget设置的样式表如下，给centralwidget包含的所有部件的背景颜色设置为淡蓝色。

*{background-color:lightblue;}

效果图:

类型选择器的使用，给centralwidget设置的样式表如下，将centralwidget下属的QPushButton背景设置为lightblue，注意下属控件也包含子部件的下属控件。

QPushButton{background-color:lightblue;}

效果图：

非子类选择器，设置centralwidget的样式表如下，仅将直接子部件QFrame的背景设置为淡蓝色，不包括QFrame的下属部件。

.QFrame{background-color:lightblue;}

效果图：

ID选择器的使用，设置widget的样式表如下，将其名为PushButton1的子部件背景设置为淡蓝色。

QPushButton#PushButton1{background-color:lightblue;}

效果图：

从属对象选择器的使用，设置centralwidget的样式表如下，将其下属子控件fram的子控件QPushButton背景设置为淡蓝色。

QFrame QPushButton{background-color:lightblue;}

效果图：

属性选择器，修改PushButton2的enable属性设置为false，其他控件维持原样，设置centralwidget的样式表如下，将enable属性为false的QPushButton控件背景设置为淡蓝色。

QPushButton[enabled="false"]{background-color:lightblue;}

效果图：

选择器也可以组合使用，一个样式声明可以应用于多个选择器，例如：

QPlainTextEdit,QLineEdit,QPushButton,QCheckBox{
    color:blue;
    background-color:rgb(0,0,0);
}

这个样式表应用于QPlainTextEdit,QLineEdit,QPushButton,QCheckBox的实例。

子控件

对于一些组合的界面组件，需要对其子控件进行选择，如QComboBox的下来按钮，或QSpinBox的上、下按钮。通过选择器的子控件可以对这些界面元素进行显示效果控制。例如：

QComboBox::drop-down{
    image:url(:/images/images/down.bmp);
}

上面的样式表是将QComboBox的drop-down子控件设置其image属性为资源文件中的图片down.bmp。

伪状态

选择器可以包含伪状态，是的样式法则只能应用于界面的某个状态，也就是一种条件应用法则。为状态出现在选择器的后面，用于冒号“：”隔开。例如：

QLineEdit:hover{
    background-color:black;
    color:yellow;
}

定义了当鼠标移动到QLineEdit上方时(hover)，改变QLineEdit的背景色和前景色。可以对为状态取反，方法是在伪状态前面加一个感叹号(!)，例如：

QLineEdit:!read-only{
    background-color:blue;
}

这里定义了readonly属性为false时，QLineEdit的背景色。

伪状态也可以进行逻辑与/逻辑或，子控件也可以使用伪状态，例如：

#逻辑与 当鼠标移动到被勾选的QCheckBox上方时将字体颜色改为蓝色
QCheckBox:hover:checked{color:blue;}

#逻辑或 当鼠标移动到QCheckBox上或QCheckBox被勾选时，将字体颜色这是为蓝色
QCheckBox:hover,QCheckBox:checked{color:blue;}

#子部件使用伪状态 QCheckBox的indicator被选中时显示图片checked.bmp
QCheckBox::indicator:checked{image:url(:/image/checked.bmp);}

使用盒子模型(box model)实现复杂的显示效果

使用样式表时，每个小部件都被视为具有四个同心矩形的框：空白矩形、边框矩形、填充矩形和内容矩形。如下图：

Content是显示内容矩形区域，比如QPushButton用于显示按钮名称的区域，min-width、max-width、min-height和max-height属性定义最大/最小宽度或高度，就是定义这个矩形区，例如：

QPushButton{
    min-width:50px;
    max-width:50px;
}
#定义QPushButton显示文字的Content区域最小的宽度和最大高度为50px

Padding是Content外围的填充矩形区域，可用的属性有padding-top(上宽度)、padding-bottom(底部宽度)、padding-left(左宽度)和padding-right(右宽度)等

Boder是Padding外围的边界矩形区域，可用的属性有border-width(边框宽度)、border-style(边框风格)、border-color(边框颜色)等。

margin是border之外与父组件之间的空白边距，可以分别定义上、下、左、右的边距大小。

margin、border-width和padding属性都默认为零。在这种情况下，所有四个矩形(边距、边框、填充和内容)完全重合。在使用background-image属性给部件指定背景图片的时候需要注意，背景图像默认只绘制在border内的区域，可以使用background-clip属性来指定绘制区域。使用background-image和border-image属性设置的背景图片不会随着控件的缩放而缩放，但使用image属性设置SVG图像则可以随控件缩放。

在程序中使用样式表

第一种是使用Qt Designer设计窗体时在部件上右击编辑某个部件的样式表(改变样式表选项)。

第二种是使用setStyleSheet函数来应用样式表，使用qApp()的setSytleSheet()函数可以为应用程序设置全局样式表，使用QWidget::setStyleSheet()可以为一个窗口，一个对话框或者一个界面组件设置样式。

qApp->setStyleSheet("QLineEdit{backgroud-color:gray}")
#如果应用程序内的某些此组件没有设置样式表，那么就会按照这个全局样式表来设置背景图片。

如果不写选择器的名字，那么样式表就是针对单个的组件的

editName->setStyleSheet("color:blue;") 
#这个就是单独给editname这个组件设置样式表的，其他的组件不受影响 。

如果同一个组件有多个样式表，那么系统会按照限定最明确的样式表来进行渲染。如果明确性相同的样式表，就按照语句执行的先后顺序进行渲染。如果样式表出现冲突，按照离当前组件最近的父组件的样式表进行渲染。

使用单个组件的setStyleSheet函数不要加"{}"否则样式表不会生效，或者在"{}"前指定是这个组件的哪个子组件或者使用通用选择器“*”号这样就可以了。

如何查看支持样式表的控件、属性、伪状态、子控件等

这么多的属性信息，想要全部牢记有些困难，编程的时候我们就要充分的利用Qt的帮助文档，在Qt帮助文档的Qt Style Sheets Reference章节中，可以查找到我们需要的信息。如下图：

在Qt Style Sheets Examples中有每个组件都有对应的例程来指导如何自定义组件，如下图：