zl程序教程

您现在的位置是:首页 >  工具

当前栏目

【QT】QT样式表语法

Qt 语法 样式表
2023-09-27 14:25:56 时间
Qt样式表Qt样式表介绍

Qt样式表是一个可以自定义部件外观的强大机制,样式表的概念、术语、语法均受到HTML层叠样式表(CSS)的启发。

样式表可通过QApplication::setStyleSheet()函数将其设置到整个应用程序上,也可以使用QWidget::setStyleSheet()将其设置到指定的部件或子部件上,不同级别均可设置样式表,称为样式表的层叠。

样式表也可通过设计模式编辑样式表。

Qt样式表语法及使用样式规则

每个样式规则由选择器和声明组成。

选择器:指定受该规则影响的部件。

声明:指定则个部件上要设置的属性。

例如:

QPushButton{color:red} 

QPushButton是选择器;

{color:red}是声明;

color是属性;

red是值。

选择器{属性1:值1;属性2:值2;属性3:值3}

此规定指定了QPushButton和它子类使用红色作为前景色。

样式表中一般不区分大小写,如color与COLOR表相同属性,但类名、对象名以及Qt属性名区分大小写。

声明中的多组"属性 : 值"列表以分号;隔开。

例如:

QPushButton{color:red;background-color:white}
选择器类型

选择器就是要被设置样式的对象(部件)。

image-20220218104003019

子部件

对于一些复杂的部件修改样式,可能需要访问它们的子部件,如QComboBox的下拉按钮,QSpinBox的向上、向下箭头等。

例如:

下来按钮设置图片属性:

QComboBox::drop-down{image:url(dropdown.png)}
伪状态

1.选择器可以包含伪状态来限制规则在部件的指定状态上的应用。伪状态在选择器之后,用冒号隔离。如:

鼠标悬停在按钮上时被应用:

QPushButton:hover{color:white}

鼠标不悬停在按钮上时被应用(!表否定)

QPushButton.!hover{color:white}

2.伪状态可以多个连用,达到逻辑与效果。如:

鼠标悬停在有一个被选中的QCheckBox部件上时才应用规则:

QCheckBox:hover:checked{color:white}

3.伪状态可通过逗号达到逻辑或效果。如:

鼠标悬停或勾选时,应用后面的样式

QCheckBox:hover,checked{color:white}

4.伪状态与子部件联合使用。如:

QComboBox::drop-down:hover{image:url(dropdown_bright.png)
冲突解决

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

QPushButton#okButton{color:gray}

QPushButton{color:red}

冲突原则:特殊的选择器优先。此例中QPushButton#okButton代表的是单一对象,而不是一个类的所有实例,所以okButton的文本颜色会是灰色的。同样的有伪状态的比没有伪状态的优先。

1.层叠

样式表设置在QApplication上、父部件上或子部件上。部件有效的样式表是通过部件的祖先样式表和QApplication上的样式表合并得到的,当发生冲突时,部件自己的样式表优先于任何继承的样式表。

2.继承

当使用Qt样式时,部件并不会自动从父部件继承字体和颜色样式设置 。如一个QPushButton包含在一个QGroupBox中,这里 对QGroupBox设置样式表:

qApp- setStyleSheet("QGroupBox{color:red;}");

但是没有对QPushButton设置样式表,这时QPushButton会使用系统颜色,而不会继承QGroupBox的颜色, 如果想要QGroupBox的颜色设置到其子部件上,可以这样:

qApp- setStyleSheet("QGroupBox,QGroupBox*{color:red;}")

3.设置QObject属性

从Qt4.3开始,任何可设计的Q_PROPERTY都可以使用"qproperty-属性 名称"的语法来设置样式表。如:

MyLabel{qproperty-pixmap:url(pixmap.png);}

MyGroupBox{qproperty-titleColor:rgb(100,200,100);}

QPushButton{qproperty-iconSize:20px 20px;}
盒子模型

使用样式表时,每个部件被看作拥有4个同心矩形的盒子,四个矩形的内容分别为内容(content)、填衬(padding)、边框(border)、边距(margin。

边距、边框宽度和填衬等属性的默认值都是0,这样四个矩形正好重叠。

image-20220218164516649

示例

代码模式设置:

 //设置样式

 //按钮设置黄色背景色

 ui- pushButton- setStyleSheet("background:yellow");

 //设置按钮前景色——文字颜色

 ui- pushButton- setStyleSheet("color:red");

 //后面的会将前面的覆盖掉,如果都想显示,就要将他们写在一起, 中间用分号隔开

 setStyleSheet("QPushButton{background:yellow;color:red}");

 ui- horizontalSlider- setStyleSheet("background:blue");

设计模式设置:

右键空白处,选择"改变样式表",然后进行样式的编辑。(可以右键单击指定某个部件进行修改。)部件属性区选择styleSheet也可进行样式的设置。
初学Qt不会样式表怎么办,打包好的Qt样式表一键生成送给你。 很多人应该和我一样,想做界面才接触的Qt,结果就是做不出来华丽的界面,想给控件上个色?不会,百度半天,好不容易给控件添加了背景色,下一个控件又不会了,别急,这次福利来了,我将平时用到的样式表做了一个总结,并做了一个一键生成,调节数据就可以实时显示,里面包括了Label,LineEdit,PushButton,CheckBox,RadioButton,ScrollBar,Slider,Progressbar,Tabwidget,ToolBox,TabWidget控件的自定义。代码很简单,就是重复写槽函数,但其对于新手的学习很有帮助,避免了盲目,大量的通过百度数据拼接样式表。一来方便学习,所以参数
Qt Style Sheets(qt样式表) 我认为qt样式表对于专注于ui交互的人,其在qt的地位不亚于信号与槽的地位。通过qt样式表可以展示绝大部分你可以想象得到的风格。
Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同。如果你熟悉CSS,可以快速浏览以下内容。
QSS包含了一个样式规则序列,一个样式规则由一个选择器和声明组成,选择器指定哪些部件由规则影响,声明指