Qt样式表总结

最新推荐文章于 2022-04-30 11:43:39 发布
最新推荐文章于 2022-04-30 11:43:39 发布
阅读量2.3k 收藏 28
点赞数 9
分类专栏： Qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25800311/article/details/109549296
版权

概念

  • Qt的样式表主要是受到CSS的启发，通过调用setStyleSheet()，可以为一个独立的子部件、整个窗口、甚至整个应用程序制定一个样式表。

  • 样式表具有继承关系，例如为一个QWidget类设置了样式表，那么QWidget类及其子类都会使用这个样式表

  • 可以在Qt帮助文档中检索Qt Style Sheets Reference关键字查看相关说明。

语法

基本语法格式

下面列出了一些基本组合，可以任意组合，各个组合间通过,分割即可。

选择器
{
	属性: 值;
}

QPushButton
{
	color: red;
}

选择器 : 状态
{
	属性: 值;
}

QPushButton : hover
{
	color: red;
}

选择器 :: 辅助控制器
{
	属性 : 值;
}

QCheckBox :: indicator
{
	color : red;
}

选择器 : 状态
{
	属性 : 值;
}

QPushButton : hover
{
	color : red;
}

选择器 :: 辅助控制器 : 状态
{
	属性 : 值;
}

QTabBar::tab:selected, QTabBar::tab:hover
{
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #E0E0E0, stop: 1 #FFFFFF);
}

选择器 (selector)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
示例1
样式同时应用于QLineEdit、QPushButton

#
QLineEdit, QPushButton
{
	color: green;
	background-color: rgb(0, 0, 0);
}

示例2
样式应用于readOnly属性为true的QLineEdit和checked属性为true的QCheckBox。

QLineEdit[read-only="true"], QCheckBox[read-only="true"]
{
	color: green;
	background-color: rgb(0, 0, 0);
}

示例3
为界面组件使用QObject::setProperty()设置动态属性，样式将应用于属性“required”为true的组件。

lineEdit->setProperty("required", "true");
checkBox->setProperty("required", "true");


*[required="true"]
{
	background-color: lime;
}

子控件 （sub-control)

子控件是相对于选择器而存在的，可以理解为选择了一个子部件，例如对于一个QCheckBox，可以分成两部分：文本部分和可以可以点击的复选框部分，我们想要单独设置整个可点击的复选框，就会用到子控件::indicator。在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
下面给出一些示例:

QMainWindow::separator{
    border: 1px solid #999999;
    border-style: outset;
    width: 4px;
    height: 4px;
}

Splitter::handle{
    border: 1px solid #999999;
    border-style: outset;
    width: 4px;
    height: 4px;
}
QSplitter::handle:hover{/*splitter->handle(1)->setAttribute(Qt::WA_Hover, true);才生效*/
    border-color: #EA2;
}
QSplitter::handle:pressed{
    border-color: #59F;
}

伪状态 (pseudo-states)

每个窗口部件都有各种状态（例如鼠标悬停在该控件上），通过加上伪装态，可以对部件在某个具体状态下的样式表进行设置。
伪状态取反：在伪状态前加一个感叹号!。例如下面是定义了readonly属性为false的QLineEdit的字体颜色和背景色:

QLineEdit:!read-only
{
	color: green;
	background-color: rgb(0, 0, 0);
}

在这里插入图片描述

伪状态串联使用：相当于“逻辑与”的计算。下面是当鼠标移动到一个被勾选了的QCheckBox组件上方时，其样式

QCheckBox:checked:hover
{
	color: red;
}

在这里插入图片描述

伪状态并联使用：相当于“逻辑或”。下面表示当鼠标移动到QCheckBox上方或者QCheckBox组件被勾选时，样式都被应用:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
子控件使用伪状态：例如下面定义了QCheckBox的indicator在checked和unchecked两种状态下的背景色：

QCheckBox::indicator:checked
{
	background-color: yellow;
}

QCheckBox::indicator:unchecked
{
	background-color: blue;
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

盒模型 (The Box model)

在这里插入图片描述
每个界面组件都可以用盒模型来表示，模型由四个同心矩形表示：
缺省的情况下，margin、border-width、padding属性缺省值为0，这种情况下，四个同心矩形就是重合的一个矩形。

  • CONTENT：是最里面的矩形，显示内容的矩形区域，它绘制窗口部件内容（如文字，图片）。如QLineEdit用于显示文字的区域，min-width、max-width、min-height和max-height属性定义最大/最小宽度或高度，就是定义这个矩形区。例如：
QLineEdit
{
    min-height: 10px;
}

在这里插入图片描述

QLineEdit
{
    min-height: 50px;
}

在这里插入图片描述

  • PADDING：是包围content的矩形区域，主要是窗口部件内容与边缘线(border)之间的缝隙，通过padding属性可以定义padding的宽度，padding-top、padding-bottom、padding-left、padding-right分别定义padding的上下左右。例如：
QLineEdit
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 20px;
}

在这里插入图片描述

QLineEdit
{
	padding-top: 30px;
	padding-right: 0px;
	padding-left: 30px;
	padding-bottom: 0px;
}

在这里插入图片描述

  • BORDER：是包围padding的边框，通过border属性（border-width、border-style、border-color）可以定义边框的线宽、线型和颜色，也可以分别定义border的上、下、左、右的线宽和颜色。使用border-radius可以定义边框转角的圆弧半径，从而构造具有圆角矩形的编辑或按钮等组件。例如：
QLineEdit {
	border-width: 3px;
	border-radius: 10px;
	border-color: green;
	padding-left: 20px;
}

在这里插入图片描述

#通过border-radius、min-width、min-height等属性可以设计圆形的按钮
QPushButton
{
	border: 2px groove red;
	border-radius: 30px;
	min-width: 60px;
	min-height: 60px;
}

在这里插入图片描述
通过border-image属性还可以为组件设置背景图片，图片会填充border矩形框之内的区域，一般使用材质图片设置背景，以使界面具有统一的特点。而background-image则是原比例填充，若控件大小小于图片大小，则仅显示一部分图片，若控件大小大于图片大小，则将图片进行重复。例如：
在这里插入图片描述

QTextEdit
{
	border-image: url("369.jpg");
}

在这里插入图片描述在这里插入图片描述

QTextEdit
{
	background-image: url("369.jpg");
}

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

样式表使用方法

方法一： 使用Qt Designer的样式表编辑器

在这里插入图片描述
优点：操作便捷，直观。
缺点：这样设计的样式表对应用程序是固定的，无法取得换肤的效果，而且需要为每个窗体都涉及样式表，重复性工作太大.

方式二: setStyleSheet函数

使用QApplication的setStyleSheet函数可以为应用程序全局设置样式
在这里插入图片描述
使用QXXX::setStyleSheet函数可以为一个窗口、一个对话框、一个界面组件设置样式。例如调用主窗口MainWindow以及其子控件QPushButton的setStyleSheet函数。
在这里插入图片描述
还可以预先将编写好的样式表存储在.qss文件中，使用setStyleSheet函数加载.qss文件。

setStyleSheet("MyQssFile.qss");

样式的明确性

为了避免样式冲突，系统定义了以下一系列的样式明确性

确定法则的明确性，Qt样式表遵循CSS2的规定

  • 具有伪状态的选择器被认为比没有伪状态的选择器明确性更强。例如：下面两条语法中，第一条的明确性更高，因此第一条生效
QPushButton:hover
{	
	color: white;
}	

QPushButton
{
	color: green;
}
  • 如果两个选择器具有相同的明确性，则以法则出现的先后顺序为准，后出现的法则起作用。例如：下面的第二个生效
QPushButton:hover
{	
	color: white;
}	

QPushButton：enabled
{
	color: green;
}
  • 父子关系的两个类作为选择器，具有相同的明确性。例如：下面两个选择器的明确性相同，所以只依赖于语句的先后顺序，因此第二个生效
QPushButton
{	
	color: white;
}	

QAbstractButton
{
	color: green;
}

样式定义的级联性

在这里插入图片描述
在这里插入图片描述

  • 样式定义可以在qApp、窗口或一个具体组件中定义，任何一个组件的样式是其父组件、父窗口和qApp的样式的融合
  • 当出现冲突时，组件会使用离自己最近的样式定义，即按顺序使用组件自己的样式、或父组件的样式定义、或父窗口的样式定义，或qApp的样式定义，而不考虑样式选择器的确定性

例如上面的多个setStyleSheet叠加，最终生效的是ui->pushButton->setStyleSheet("QPushButton {color: green}");。

示例汇总

QGroupBox

QGroupBox 
{
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #E0E0E0, stop: 1 #FFFFFF);
}

在这里插入图片描述

QGroupBox 
{
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #E0E0E0, stop: 1 #FFFFFF);
	max-width:200px;
}

在这里插入图片描述

QGroupBox 
{
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #E0E0E0, stop: 1 #FFFFFF);
	padding-bottom: 10px;
}

在这里插入图片描述

QGroupBox 
{
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #E0E0E0, stop: 1 #FFFFFF);
	padding-top: 30px;
}

在这里插入图片描述

QGroupBox 
{
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #E0E0E0, stop: 1 #FFFFFF);
	padding-left: 60px;
}

在这里插入图片描述

QGroupBox 
{
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #E0E0E0, stop: 1 #FFFFFF);
	padding-bottom: 15px;
	padding-top: 20px;
	padding-left: 3px;
	padding-right: 3px;
}

在这里插入图片描述

QGroupBox 
{
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #E0E0E0, stop: 1 #FFFFFF);
	padding-bottom: 15px;
	padding-top: 20px;
	padding-left: 3px;
	padding-right: 3px;
	border: 1px solid #FF0000;
}

在这里插入图片描述

QGroupBox 
{
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #E0E0E0, stop: 1 #FFFFFF);
	padding-bottom: 15px;
	padding-top: 20px;
	padding-left: 3px;
	padding-right: 3px;
	border: 1px solid #FF0000;
	border-radius: 20px;
}

在这里插入图片描述

QGroupBox 
{
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #E0E0E0, stop: 1 #FFFFFF);
	padding-bottom: 15px;
	padding-top: 20px;
	padding-left: 3px;
	padding-right: 3px;
	border: 1px solid #FF0000;
	border-radius: 20px;
	margin-left: 30px;
}

在这里插入图片描述

QGroupBox 
{
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #E0E0E0, stop: 1 #FFFFFF);
	padding-bottom: 15px;
	padding-top: 20px;
	padding-left: 3px;
	padding-right: 3px;
	border: 4px solid #FF0000;
	border-radius: 20px;
	margin-left: 30px;
	margin-bottom: 30px;
}

在这里插入图片描述

QGroupBox 
{
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #E0E0E0, stop: 1 #FFFFFF);
	padding-bottom: 15px;
	padding-top: 20px;
	padding-left: 3px;
	padding-right: 3px;
	border: 2px solid #FF0000;
	border-radius: 20px;
	margin-left: 30px;
	margin-bottom: 30px;
}

QGroupBox::title {
  subcontrol-origin: border;
  subcontrol-position: top center;
  background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									stop: 0 #FF0ECE, stop: 1 #FFFFFF);
}

在这里插入图片描述

QListView

在这里插入图片描述

QListView {
    show-decoration-selected: 1; /* make the selection span the entire width of the view */
}

QListView::item:alternate {
    background: #EEEEEE;
}

QListView::item:selected {
    border: 1px solid #6a6ea9;
}

QListView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #ABAFE5, stop: 1 #8588B2);
}

QListView::item:selected:active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #6a6ea9, stop: 1 #888dd9);
}

QListView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #FAFBFE, stop: 1 #DCDEF1);
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

QListView {
    show-decoration-selected: 1; /* make the selection span the entire width of the view */
	font-size: 20px;
	font-weight: bold;
	font-family: "New Century Schoolbook";
}

QListView::item:alternate {
    background: #EEEEEE;
}

QListView::item:selected {
    border: 1px solid #6a6ea9;
}

QListView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #ABAFE5, stop: 1 #8588B2);
}

QListView::item:selected:active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #6a6ea9, stop: 1 #888dd9);
}

QListView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #FAFBFE, stop: 1 #DCDEF1);
}

在这里插入图片描述

南方以北
关注
  • 9
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt 样式表详解（很全面，秒懂）
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
03-28 208
而我们在 c++ 代码中的窗口的 width 与 height 指的是整个盒子的宽度与高度, 这一点非常重要. 整个盒子的宽度应该等于: 左外边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右外边距, 同理, 整个盒子的高度也是上下外边距,内边距,边框和内容高度的和。与背景相对应, 背景设置的是控件的最底层的颜色, 作为背景, 但 color 设置的前景色, 也就 是控件文字的颜色, color 属性是被所有 widget 都支持的。
Qt样式表使用大全(中文整理资料)
09-12
主要介绍Qt样式表QSS的使用，语法规则介绍。 这是网络上整理的比较“难得的中文使用手册”，非常适合新手学习样式表使用。
QT 常见控件样式表（QPushButton、QRadioButton、QCheckBox、QScrollBar、QTableView、QTableWidget、QComboBox、QSlider）
m0_67254672的博客
04-30 1万+
background-image:设置背景图片（根据图片大小） border-image:设置背景图片（根据控件大小） background-color:设置背景颜色 border-color:设置边框颜色 color:设置字体颜色 border:设置边框 例:border:1px solid red; border-radius:设置边框圆角 /*左上 右上 右下 左下*/ border-top-left-radius:设置单个圆角 font：设置字体 text-align: 设置
Qt样式表
weifc-wei 的博客
04-10 411
一Qt样式表 1.1 Qt样式表介绍 Qt样式表是一个可以自定义部件外观的强大机制，样式表的概念、术语、语法均受到 HTML的层叠样式表(Cascading Style Sheets,CSS)的启发。 样式表可通过QApplication::setStyleSheet()函数将其设置到整个应用程序上， 也可以使用QWidget::setStyleSheet()将其设置到指定的部件或子部件上， 不同级别均可设置样式表，称为样式表的层叠。样式表也可通过设计模式编辑样式表 1.2 Qt样式表语法 （1）样式规
QT样式表
weixin_33810006的博客
11-10 1504
QT样式表   一、QT样式表简介 1、QT样式表简介     QSS的主要功能是使界面的表现与界面的元素分离，使得设计皮肤与界面控件分离的软件成为可能。 QT样式表是允许用户定制widgets组件外观的强大机制，此外，子类化QStyle也可以定制widgets组件外观。QT样式表的概念、术语、语法很大程度上受到了CSS层叠样式表的影响。 样式表是使用QApplication::setStyleS...
Qt 样式表
allen5200的专栏
04-10 1560
在Qt中设置widget背景颜色或者图片方法很多种：重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等。  setStyleSheet() pWidget->setStyleSheet("background-color:blue;"); //设置背景颜色 pWidget->setStyleSheet("background-color:rgb
样式表语法总结_Qt样式表语法总结_Qt样式表_QT_
10-01
Qt样式表语法总结，Qt样式表的用法及各种效果的代码示范等
Qt5-stylesheet-样式表
04-05
配合本人博客Qt开发总结（29）——样式表的例子，内含三个典型的样式表，几乎涵盖了Qt样式表的所有语法规则。具体内容可以移步到我的个人博客下学习。
Qt StyleSheet 样式表实例
11-03
这是一个大神总结的一些Qt界面美化的实例 每一种方式大神都有实例代码， 可以好好借鉴一下 希望大家共同进步
QT 完整项目框架 源码分享
12-30
QT开发这几年大大小小项目做了不少,花了点时间对知识点总结整合了...4.QSS样式表 5.日志管理 6.冻结个别列的TableWidget 7.自定义TableWidget 8.系统时间设置 9.时间选择界面 10.自定义提示框 11.系统配置 QSettings ...
自定义按钮，鼠标移入、移出、摁下，分别改变按钮图标样式原理和代码总结（上图标下文字、hover、QSS样式表、QPushbutton）1.zip
10-22
本代码主要总结一个自定义按钮，该按钮布局是上面图片下面文字，其中，可以自定义样式，当鼠标分别移入、移出、摁下自定义按钮时，自动改变自定义按钮中的图片。可以任意设置图片中文字和图片位置、以及鼠标移入、...
QT-样式表
热门推荐
Half-up的博客
03-31 1万+
Qt样式表是一个可以自定义部件外观的十分强大的机制﹐除了那些能够通过子类化QStyle更改的外观,其余的都可以使用Qt样式表来美化。Qt样式表的概念,术语和语法都受到了HTML的层叠样式表(Cascading Style Sheets, CSS)的启发,不过与CSS不同的是,Qt样式表应用于部件。 Qt样式表介绍 样式表可以使用QApplication: : setStyleSheet()函数将其设置到整个应用程序上,也可以使用QWidget::setStyleSheet()函数将其设置到一个指定的部件(还
qt 样式表
fenhong91的博客
06-09 491
QT样式表参考CSS层叠样式表设计，不同之处在于QT样式表应用于Widget世界。 可以使用QApplication::setStyleSheet()函数设置到整个应用程序上，也可以使用QWidget::setStyleSheet()设置到某一个部件以及子部件上。如果在不同的级别都设置了样式表，QT会使用所有有效的样式表，称为样式表的层叠。 this->setStyleSheet("QpushButton{background:yellow}QSlider{background:blue}");
initle: qt样式表葵花宝典
最新发布
07-19
### 回答1： Qt样式表葵花宝典是一个非常有用的资源，它提供了许多关于如何使用Qt样式表的技巧和技巧。 首先，Qt样式表是一种通过CSS语法来定义应用程序界面的方法。它允许您更改控件的外观和行为，以使应用程序的界面更加个性化和吸引人。 葵花宝典为我们提供了一个完整的指南，帮助我们了解如何使用Qt样式表来设置字体、颜色、背景、边框等各种外观属性。它提供了大量的示例代码和详细的说明，使我们能够轻松地定制和美化我们的Qt应用程序。 除了基本的样式设置，葵花宝典还提供了如何应用样式表到特定的控件或窗口、如何使用伪类和伪元素来处理不同的状态和效果等进阶内容。这些技巧可以帮助我们实现更复杂和富有交互性的用户界面。 此外，葵花宝典还提供了一些关于如何自定义Qt样式的建议和最佳实践。例如，如何通过继承和重载来扩展和修改Qt控件的样式，以及如何管理和组织大规模的样式表文件等。 总之，Qt样式表葵花宝典提供了丰富的知识和技巧，使我们能够更好地理解和应用Qt样式表来定制和美化我们的应用程序界面。它是Qt开发者必备的宝典之一。 ### 回答2： Qt样式表是Qt框架提供的一种用于美化和自定义Qt应用程序界面的技术。从字面上看，“葵花宝典”表示Qt样式表的精髓和重要性。 Qt样式表的设计思想灵感来自于CSS（层叠样式表），使得开发者可以通过简单的代码语法来定义和修改Qt应用程序的外观。使用Qt样式表，开发者可以自定义各种控件的外观、颜色、字体、边框、背景等，以满足不同用户的需求和设计要求。 葵花宝典的含义在于，Qt样式表是Qt开发中的重要技术，在应用程序的界面设计过程中起到了关键的作用。它提供了丰富的样式选择器和属性定义，使得开发者可以灵活地控制和调整界面的外观。 Qt样式表葵花宝典还可以指代一些Qt样式表的技巧和经验总结，包括如何使用选择器来选择特定的控件，如何使用属性来定义控件的样式，如何实现动态样式的变化等等。这些技巧和经验可以帮助开发者更好地利用Qt样式表来定制和美化界面，进一步提升应用程序的用户体验。 总之，Qt样式表葵花宝典代表了Qt样式表在Qt开发中的重要性和价值，它为开发者提供了自定义和美化Qt应用程序界面的强大工具和技术。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值