当前位置:   article > 正文

Qt样式表的使用setStyleSheet

setstylesheet

样式表的示例

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

  1. QWidget{
  2. background-color: rgb(255,255,0);
  3. color: rgb(255,0,0);
  4. font: 12pt "宋体";
  5. }

样式表的语法

样式法则由一个选择器(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;}

效果图:

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

  1. QPlainTextEdit,QLineEdit,QPushButton,QCheckBox{
  2. color:blue;
  3. background-color:rgb(0,0,0);
  4. }

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

子控件

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

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

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

伪状态

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

  1. QLineEdit:hover{
  2. background-color:black;
  3. color:yellow;
  4. }

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

  1. QLineEdit:!read-only{
  2. background-color:blue;
  3. }

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

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

  1. #逻辑与 当鼠标移动到被勾选的QCheckBox上方时将字体颜色改为蓝色
  2. QCheckBox:hover:checked{color:blue;}
  3. #逻辑或 当鼠标移动到QCheckBox上或QCheckBox被勾选时,将字体颜色这是为蓝色
  4. QCheckBox:hover,QCheckBox:checked{color:blue;}
  5. #子部件使用伪状态 QCheckBox的indicator被选中时显示图片checked.bmp
  6. QCheckBox::indicator:checked{image:url(:/image/checked.bmp);}

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

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

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

  1. QPushButton{
  2. min-width:50px;
  3. max-width:50px;
  4. }
  5. #定义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()可以为一个窗口,一个对话框或者一个界面组件设置样式。

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

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

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

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

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

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

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/613786
推荐阅读
相关标签
  

闽ICP备14008679号