Qt | 关于样式表的使用 QStyleSheet

简介: 关于Qt样式表的使用。

前言:

Qt样式表是一个可以自定义部件外观的十分强大的机制,样式表可以使用QApplication::setStyleSheet()函数将其设置到整个应用程序上,也可以使用QWidget::setStyleSheet()函数将其设置到一个指定的部件(还有它的子部件)上。

如果在不同的级别都设置了样式表,那么Qt会使用所有有效地样式表,即样式表的层叠。

设置样式表:

1.给指定部件设置样式表:

//设置pushButton的背景色
ui->pushButton->setStyleSheet("background:yellow");
//设置horizontalSlider的背景颜色
ui->horizontalSlider->setStyleSheet("background:blue");

通过指定部件的setStyleSheet()函数就只会对这个部件应用这个样式。

2.对所有的相同部件使用相同的样式:

//在父窗体上调用setStyleSheet()函数
this->setStyleSheet("QPushButton{background:yellow}QSlider{background:blue}");

这样,父窗体上的所有的QPushButton部件和QSlider部件的背景颜色都会为我们设置的颜色。

通过这种方式可以对QListWidget中的Item进行统一样式设置:

"QListWidget{border:0px;background-color:#FFFFFF;outline:0px;}
QListWidget::Item {background:#FFFFFF;}
QListWidget::Item:hover {background:#EEEEEE;}
QListWidget::item:selected {background:#DDDDDD;}
QListWidget::item:selected:!active {background:#FFFFFF;}"

3.设置父部件的样式,并且子部件不继承:

//父部件为一个QWidet
this->setObjectName("myWidget");
this->setStyleSheet(QWidget#myWidget{background:black});

这里的setObjectName("myWidget")是用来设置父部件的名称,在setStyleSheet()函数中通过指定“#myWidget”指定我们设置的样式只应用在myWidget上,它里面的子部件不会继承父部件的样式。

这个方法还可以和方法2一起用,即调用父部件的setStyleSheet()函数,在参数中除了可以写父部件的样式,还可以指定子部件的objectName,对子部件进行设置。

4.在main函数中调用QApplication::setStyleSheet()对程序进行样式设置:

直接在main函数中调用:qApp->setStyleSheet();参数为部件的样式,这种方法可以实现调用qss文件,实现样式设置。

QFile qss(":/qss/style.qss");
qss.open(QFile::ReadOnly);
qApp->setStyleSheet(qss.readAll());
qss.close();

style.qss文件中的设置如图:

网络异常,图片无法展示
|

这样,整个程序中的QScrollBar都将会上图设置的样式,这个方法适合进行样式统一,减少代码量。

Qt样式表语法:

Qt样式表的术语和语法规则与HTML CSS基本相同。

1.样式规则:

样式表包含了一系列的样式规则,每个样式规则由选择器(selector)和声明(declaration)组成。

  • 选择器指定了受该规则影响的部件;
  • 声明指定了这个部件上要设置的属性;

例:QPushButton{color:red}

  • QPushButton是选择器;
  • {color:red}是声明,其中,color是属性,red是属性的值。

一些选择器可以指定相同的声明,选择器中间用逗号隔开。

例如:QPushButton,QLineEdit,QComboBox{color:red}

样式规则的声明部分是一些 “属性:值” 对组成的列表,它们包含在大括号中,使用分号隔开。

例如:QPushButton{color:red;background-color:white}

可以在 Qt Style Sheets Reference 关键字对应的帮助文档中的 List of Properties 一项中查看Qt样式表支持的所有属性。

网络异常,图片无法展示
|

2.子控件:

对一些复杂的部件修改样式,可能需要访问它们的子控件,比如QComboBox的下拉按钮、QSpinBox的向上和向下箭头等。选择器可以包含子控件来对部件的特定子控件设置样式。

例如:QComboBox::drop-down{image:url(dropdown.png)}

在 Qt Style Sheets Reference 关键字对应的帮助文档中的 List of Stylabel Widgets 一项中列出了所有可以使用的样式表来自定义样式的Qt部件, List of Sub-Controls 一项中列出了所有可用的子控件。

3.伪状态:

  • 选择器可以包含伪状态来限制规则在部件的指定状态上的应用。伪状态出现在选择器之后,用冒号隔开。

例如:QPushButton:hover{color:white};表明当鼠标悬停在QPushButton上时,颜色为白色。

  • 伪状态可以用感叹号来表示否定。

例如:QRadioButton:!hover{color:red};表明当鼠标没有悬停在QRadioButton上时,颜色为红色。

  • 伪状态可以多个连用,达到逻辑与的效果。

例如:QCheckBox:hover:checked{color:white};表明当鼠标悬停在一个被选中的QCheckBox部件上时颜色才为白色。

  • 伪状态可以用逗号表示逻辑或操作。

例如:QCheckBox:hove, QCheckBox:checked{color:white};表明当鼠标悬停在QCheckBox上时为白色,或者当QCheckBox为选中状态时为白色。

  • 伪状态可以和子控件联合使用。

例如:QComboBox::drop-down:hover{image:url(dropdown.png)};表明当鼠标悬停在QComboBox的下拉按钮上时,下拉按钮的图片为dropdown.png。

4.冲突解决:

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

QPushButton#okButton{color:gray};
QPushButton{color:red};

这时,okButton的color属性就产生了冲突。解决冲突的原则是:

  • 特殊的选择器优先。
  • 有伪状态比没有伪状态优先。
  • 部件自己的样式表优先于任何继承的样式表,父部件的样式表优先于祖先的样式表。

所以okButton最后为灰色。

5.层叠:

样式表可以设置在QApplication上、父部件上或者子部件上。部件有效地样式表是通过部件祖先的样式表和QApplication上的样式表合并得到的。

当发生冲突时,部件自己的样式表优先于任何继承的样式表,同样的,父部件的样式表优先于祖先的样式表。

6.继承:

当使用Qt样式表时,部件并不会自动从父部件继承字体和颜色(color)设置。例如,一个QPushButton包含在一个QGroupBox中,这里对QGroupBox设置颜色为红色,但是不对QPushButton设置样式表。这时,QPushButton会使用系统颜色,而不会继承QGroupBox的颜色。

有些属性是有继承性的,有些属性是没有继承性的。

目录
相关文章
|
JavaScript 前端开发 C++
初学Qt不会样式表怎么办,打包好的Qt样式表一键生成送给你。
很多人应该和我一样,想做界面才接触的Qt,结果就是做不出来华丽的界面,想给控件上个色?不会,百度半天,好不容易给控件添加了背景色,下一个控件又不会了,别急,这次福利来了,我将平时用到的样式表做了一个总结,并做了一个一键生成,调节数据就可以实时显示,里面包括了Label,LineEdit,PushButton,CheckBox,RadioButton,ScrollBar,Slider,Progressbar,Tabwidget,ToolBox,TabWidget控件的自定义。代码很简单,就是重复写槽函数,但其对于新手的学习很有帮助,避免了盲目,大量的通过百度数据拼接样式表。一来方便学习,所以参数
初学Qt不会样式表怎么办,打包好的Qt样式表一键生成送给你。
Qt样式表——选择器详解
Qt样式表——选择器详解
|
设计模式 前端开发
【QT】QT样式表语法
【QT】QT样式表语法
【QT】QT样式表语法
|
Windows
Qt Style Sheets(qt样式表)
我认为qt样式表对于专注于ui交互的人,其在qt的地位不亚于信号与槽的地位。通过qt样式表可以展示绝大部分你可以想象得到的风格。
1842 0
|
前端开发
Qt之QSS(样式表语法)
简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同。如果你熟悉CSS,可以快速浏览以下内容。 简述 样式规则 选择器类型 子控件 伪选择器 解决冲突 级联效应 继承性 Namespaces中的部件 设置对象属性 更多参考 样式规则 QSS包含了一个样式规则序列,一个样式规则由一个选择器和声明组成,选择器指定哪些部件由规则影响,声明指
1982 0
|
1月前
|
网络协议 C++
C++ Qt开发:QTcpSocket网络通信组件
`QTcpSocket`和`QTcpServer`是Qt中用于实现基于TCP(Transmission Control Protocol)通信的两个关键类。TCP是一种面向连接的协议,它提供可靠的、双向的、面向字节流的通信。这两个类允许Qt应用程序在网络上建立客户端和服务器之间的连接。Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用`QTcpSocket`组件实现基于TCP的网络通信功能。
38 8
C++ Qt开发:QTcpSocket网络通信组件
|
15天前
|
图形学 Python 容器
【PyQt5桌面应用开发】3.Qt Designer快速入门(控件详解)
【PyQt5桌面应用开发】3.Qt Designer快速入门(控件详解)
35 0

相关课程

更多

推荐镜像

更多