| Qt样式表的使用setStyleSheet | 您所在的位置：网站首页 › 类选择器代码的格式 › Qt样式表的使用setStyleSheet |
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，字体名称为“仿宋”。当一个属性有多个值的时候，多个值用空格隔开。 样式表支持的选择器 选择器例子用途通用选择器*样式表适用于所有的组件类型选择器QPushButton所有QPushButton类及其子类的组件属性选择器QPushButton[flat="false"]样式表应用后组件的属性再发生变化，需要重新应用样式表才能刷新显示效果。非子类选择器.QPushButton所有QPushButton类的组件，但是不包括QPushButton的子类ID选择器QPushButton#btnOk样式表应用于名称为btnOk的QPushButton实例从属对象选择器QDailog QPushButton样式表应用于所有从属于QDialog的QPushButton类的实例，即QDialog对话框里的所有QPushButton子对象选择器QDailog > QPushButton样式表应用于所有直接从属QDialog的QPushButton类的实例下面以实例说明，下图为本例所使用的控件，以及控件的对象名称和层次关系，最外层为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区域最小的宽度和最大高度为50pxPadding是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中有每个组件都有对应的例程来指导如何自定义组件，如下图：
|
【本文地址】