qt语法

👤拔丝英语网 🕔2024/01/21 12:22 📁国外生活

QSS——Qt Style Sheet，Qt通过样式表设置控件样式进行个性化定制、界面美化。

前言

一.QSS介绍

QSS是一种从CSS借鉴过来的机制，用来实现对控件外观的自定义。但是它比CSS功能要弱化一些，有一些属性和选择器，QSS并没有。

Qt中的各个控件可以使用QSS来实现界面的个性化定制、美化，使用起来也是特别方便的。

二.Qss的功能

Qt程序界面中控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性可以通过Qss文件来设置，美化UI界面。实现界面和程序的分离，快速切换皮肤。

QSS语法知识基础

1.基础语法

QSS同CSS语法规则类似，形式如下：

selector{attribute:value};

其中：

selector选择器：通常情况下为控件类名（如QPushButton）；
attribute属性：待设置的样式表属性（如background-color）；
value值：属性赋值（如rgb(40, 85, 20);）；

QPushButton { color: red }

Qt样式表通常不区分大小写(即，color、Color、color和color指的是同一属性)。但是是类名、对象名和Qt属性名，它们区分大小写。

2.共享属性

对于共享属性部分可以使用下面形式：

QCheckBox,QComboBox,QSpinBox
{
color:rgb(255,0,0);
background-color:rgb(255,255,255);
font:bold;
}

这样就设置了所有作用范围内的QCheckBox、QComboBox、QSpinBox的前景色、背景色和字体。

3.选择器（selector）

Qt样式表支持CSS2中定义的所有选择器。下表总结了最有用的选择器类型。

选择器	举例	解释
通用选择器	*	所有 Qt 的 widget，即不声明选择器时，属性作用于所有组建
类型选择器	QPushButton	作用于QPushButton及其子类的实例。
属性选择器	QPushButton[flat=“false”]	作用于非平面（flat=“false”）的QPushButton实例。
类选择器	.QPushButton	作用于QPushButton的实例，但不匹配其子类的实例。（加了个’.’)
ID选择器	QPushButton#okButton	作用于对象名称为okButton的所有QPushButton实例。
后代选择器	QDialog QPushButton	匹配作为QDialog的子体(子级、孙级等)的所有QPushButton实例。
子选择器	QDialog > QPushButton	匹配作为QDialog的直接子级的所有QPushButton实例。
子控制	QComboBox::drop-down	要设置复杂 widget 的样式，需要访问 widget 的子控件，如QComboBox的下拉按钮或QSpinBox的上下箭头。选择器可以包含子控件，从而可以将规则的应用限制到特定的 widget 子控件。

4.伪状态（Pseudo-States）

用户在操作时，可以根据不同的交互状态展示不同的用户样式，界面能够识别用户操作，不需要代码控制即可响应不同状态下的样式。例如：

QPushButton {
    border: 1px solid #555;
    padding: 4px;
    min-width: 65px;
    min-height: 12px;
}

QPushButton:hover {
    background-color: #999;
}

QPushButton:pressed {
    background-color: #333;
    border-color: #555;
    color: #AAA;
}

QPushButton:disabled {
    color: #333333;
}

QPushButton在hover、pressed、disabled状态时，分别展示不同的样式。下列是从qt-5/stylesheet-reference中翻译过来的所有伪状态。

Pseudo-State	Description
:active	此状态在widget驻留在活动窗口中时设置。
adjoins-item	此状态在QTreeView的::branch与项相邻时设置。
:alternate	当QAbstractItemView::ternatingRowColors()设置为true时，将为绘制QAbstractItemView的行时的每隔一行设置此状态。
:bottom	该项目位于底部。例如，标签位于底部的QTabBar。
:checked	该项目已选中。例如，QAbstractButton的选中状态。
:closable	这些项目可以关闭。例如，QDockWidget打开了QDockWidget::DockWidgetClosable功能。
:default	该项目为默认值。例如，QMenu中的默认QPushButton或默认操作。
:disabled	该项目已禁用。
:editable	QComboBox是可编辑的。
:edit-focus	该项具有编辑焦点(请参见QStyle::State_HasEditFocus)。此状态仅适用于Qt扩展应用程序。
:enabled	该项目已启用。
:exclusive	该项目是独占项目组的一部分。例如，独占QActionGroup中的菜单项。
:first	该项目是(列表中的)第一个项目。例如，QTabBar中的第一个选项卡。
:flat	这件物品是平的。例如，平面QPushButton。
:floatable	这些项目可以浮动。例如，QDockWidget打开了QDockWidget：：DockWidgetFloatable功能。
:focus	该项具有输入焦点。
:has-children	该项目具有子项。例如，QTreeView中具有子项的项。
:has-siblings	该项目有同级。例如，QTreeView中的同级项。
:horizontal	该项目具有水平方向
:hover	鼠标悬停在该项目上。
:indeterminate	该项具有不确定状态。例如，部分选中QCheckBox或QRadioButton。
:last	该项是(列表中的)最后一项。例如，QTabBar中的最后一个选项卡。
:left	该项目位于左侧。例如，选项卡位于左侧的QTabBar。
:maximized	该项目将最大化。例如，最大化的QMdiSubWindow。
:middle	项目在中间(在列表中)。例如，QTabBar中不在开头或结尾的制表符。
:minimized	该项目被最小化。例如，最小化的QMdiSubWindow。
:movable	物品可以四处移动。例如，QDockWidget打开了QDockWidget::DockWidgetMoovable功能。
:no-frame	该项目没有框架。例如，无框架的QSpinBox或QLineEdit。
:non-exclusive	该项是非独占项组的一部分。例如，非独占QActionGroup中的菜单项。
:off	对于可以切换的项目，这适用于处于“关闭”状态的项目。
:on	对于可以切换的项目，这适用于处于“打开”状态的widget。
:only-one	该项目是(列表中的)唯一项目。例如，QTabBar中的一个单独的选项卡。
:open	该项目处于打开状态。例如，QTreeView中的展开项，或具有打开菜单的QComboBox或QPushButton。
:next-selected	选择下一项(在列表中)。例如，QTabBar的选定选项卡紧挨着该项。
:pressed	正在使用鼠标按下该项。
:previous-selected	选择上一项(在列表中)。例如，QTabBar中选定选项卡旁边的选项卡。
:read-only	该项目标记为只读或不可编辑。例如，只读QLineEdit或不可编辑的QComboBox。
:right	该项目位于右侧。例如，选项卡位于右侧的QTabBar。
:selected	该项目即被选中。例如，QTabBar中的选定选项卡或QMenu中的选定项目。
:top	该项目位于顶部。例如，选项卡位于顶部的QTabBar。
:unchecked	该项目处于取消选中状态。
:vertical	该项目具有垂直方向。
:window	widget是窗口(即顶层小部件)

QSS阐述及使用

我们接下来以一个简单地例子来，说明怎么使用qss修改界面外观。

一.举个栗子

设置QLineEdit控件背景色为黄色。

qApp->setStyleSheet("QLineEdit { background-color: yellow; }");

效果：

其中: QLineEdit表示选择器，background-color表示属性，yellow表示值。

每个qss样式都有下面的形式：

selector { attribute: value }

二.选择器

1.通用选择器

“*”，匹配所有控件（QWidget）：

qApp->setStyleSheet("* { background-color: yellow; }");

主窗口与QLineEdit背景色均为黄色。

总结：通配选择器：* ;所有的控件属性设置

{

}

2.类型选择器

"类名"作为选择器，作用于本类及其子类：

QLineEdit* lineEdit = new QLineEdit(ui->centralWidget);

MyLineEdit* myLineEdit = new MyLineEdit(ui->centralWidget);

qApp->setStyleSheet("QLineEdit { background-color: yellow; }");

QLineEdit与子类MyLineEdit颜色均为黄色。

总结：

类型选择器：QPushButton ; 匹配所有QPushButton和其子类的实例

QPushButton

{

}

3.类选择器

".+类名"作为选择器,仅作用于本类

qApp->setStyleSheet(".QWidget { background-color: yellow; }");

QWidget类型centralWidget为黄色，QLineEdit不变。

疑问：

像上面这样指定QWidget，QLineEdit不会受影响；

但是自己从QLineEdit上派生出MyLineEdit类，此时使用

qApp->setStyleSheet(".QLineEdit { background-color: yellow; }");

结果MyLineEdit与QLineEdit均变为黄色，应该是哪里没对？？

“. + class的属性值” 作为选择器

先定义qss样式，然后setProperty()设置"class"属性值为"xxx"。

qApp->setStyleSheet(".test { background-color: yellow; }");
lineEdit->setProperty("class", "test");

总结：

类选择器： .QPushButton ; 匹配所有QPushButton的实例，但是并不匹配其子类。这是与CSS中的类选择器不一样的地方，注意前面有一个点号

.QPushButton

{

}

4.ID选择器

“# + objectName” 作为选择器，只作用于此objectName对象；

#前面可加类名，也可省略。

lineEdit1->setObjectName(QString::fromUtf8("lineEdit1"));
lineEdit2->setObjectName(QString::fromUtf8("lineEdit2"));
qApp->setStyleSheet("#lineEdit1 { background-color: yellow; }"
                  "#lineEdit2 { background-color: red; }");

或

lineEdit1->setObjectName(QString::fromUtf8("lineEdit1"));
lineEdit2->setObjectName(QString::fromUtf8("lineEdit2"));
qApp->setStyleSheet("QLineEdit#lineEdit1 { background-color: yellow; }"
                    "QLineEdit#lineEdit2 { background-color: red; }");

多个控件样式一样，也可以连用，以","分割：

qApp->setStyleSheet("#lineEdit1, #lineEdit2 { background-color: green; }");

或

qApp->setStyleSheet("QLineEdit#lineEdit1, QLineEdit#lineEdit2 { background-color: green; }");

总结：

ID选择器： #myButton; 匹配所有id为myButton的控件实例，这里的id实际上就是objectName指定的值,针对特定名称的控件设置属性。

QPushButton#myButton1, #myButton2

{

}

5.属性选择器

"类名[属性=‘值’]"作为选择器，值一定是字符串。

qApp->setStyleSheet("QLineEdit[bkColor='red'] { background-color: red; }"
                    "QLineEdit[bkColor='green'] { background-color: green; }");
lineEdit1->setProperty("bkColor", "red"); // 显示红色样式
lineEdit2->setProperty("bkColor", "green"); // 显示绿色样式

总结：

.属性选择器：QPushButton[flat="false"]; 匹配所有flat属性是false的QPushButton实例，注意该属性可以是自定义的属性，不一定非要是类本身具有的属性

QPushButton[flat="false"]

{

}

6.包含选择器

"父控件类型子控件类型"作为选择器，选择器之间用空格隔开；作用于父控件下所有指定类型直接和间接子控件。

QLineEdit* lineEdit1 = new QLineEdit(ui->centralWidget);
QWidget* widget = new QWidget(ui->centralWidget);
QLineEdit* lineEdit2 = new QLineEdit(widget);
ui->centralWidget->setStyleSheet("QWidget QLineEdit { background-color: red; }");

lineEdit1为ui->centralWidget的子控件，lineEdit2是ui->centralWidget的孙子控件，故两者都为红色。

总结：

后代选择器：QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的还是间接的。

QDialog QPushButton

{

}

7.子元素选择器

"父控件 > 子控件"作为选择器，作用于父控件下所有指定类型直接子控件。与包含选择器的区别是否作用于间接子控件。

QLineEdit* lineEdit1 = new QLineEdit(ui->centralWidget);
QLineEdit* lineEdit2 = new QLineEdit(this);
this->setStyleSheet("QMainWindow > QLineEdit { background-color: red; }");

lineEdit1位于QMainWindow->centralWidget下，lineEdit2 位于QMainWindow下，故QMainWindow直接子控件lineEdit2变为红色，间接子控件lineEdit1无变化。

总结：

子选择器： QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog

QDialog > QPushButton

{

}

8.伪类选择器

"选择器:状态"作为选择器，状态支持!操作符，表示取非。

QPushButton* btn = new QPushButton("test1", ui->centralWidget);
btn->setStyleSheet("QPushButton:pressed { color: red; }"
                   "QPushButton:!pressed { color: green; }");

伪类选择器还支持链式规则：

“选择器:状态1:状态2:状态3”

状态之间使用逻辑与，同时满足条件样式才生效

btn->setStyleSheet("QPushButton:hover:pressed { color: yellow; }");

9.Subcontrol选择器

"类名::部件名"作为选择器，类由多个部件组成，通过它可以设置部件的外观。

QCheckBox* check = new QCheckBox("test", ui->centralWidget);
check->setStyleSheet("QCheckBox::indicator:checked { image: url(:/res/check.png); }"
                     "QCheckBox::indicator:unchecked { image: url(:/res/uncheck.png); }");

10.Qss优先级

上面虽然用了选择器，单肯定会有重复的设置，那么系统怎么去排列这些设置的优先级。原则：宽泛的设置优先级低于更加针对具体的设置，文件上面的设置优先级低于文件下面的设置。

三.属性

QSS基本属性参考链接：使用Qss设置QT程序界面的样式和皮肤

https://www.cnblogs.com/bclshuai/p/9809679.html

1. QSS基本属性设置

Qss的强大在于组合功能的强大，这里只是简单介绍基本功能，将简单功能组合起来才能实现好看的效果。

Qss背景属性（Background）

属性	描述	CSS
background	在一个声明中设置所有的背景属性。	1
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-color	设置元素的背景颜色。	1
background-image	设置元素的背景图像。	1
background-position	设置背景图像的开始位置。	1
background-repeat	设置是否及如何重复背景图像。	1
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

QSS边框属性（Border 和 Outline）

属性	描述	CSS
border	在一个声明中设置所有的边框属性。	1
border-bottom	在一个声明中设置所有的下边框属性。	1
border-bottom-color	设置下边框的颜色。	2
border-bottom-style	设置下边框的样式。	2
border-bottom-width	设置下边框的宽度。	1
border-color	设置四条边框的颜色。	1
border-left	在一个声明中设置所有的左边框属性。	1
border-left-color	设置左边框的颜色。	2
border-left-style	设置左边框的样式。	2
border-left-width	设置左边框的宽度。	1
border-right	在一个声明中设置所有的右边框属性。	1
border-right-color	设置右边框的颜色。	2
border-right-style	设置右边框的样式。	2
border-right-width	设置右边框的宽度。	1
border-style	设置四条边框的样式。	1
border-top	在一个声明中设置所有的上边框属性。	1
border-top-color	设置上边框的颜色。	2
border-top-style	设置上边框的样式。	2
border-top-width	设置上边框的宽度。	1
border-width	设置四条边框的宽度。	1
outline	在一个声明中设置所有的轮廓属性。	2
outline-color	设置轮廓的颜色。	2
outline-style	设置轮廓的样式。	2
outline-width	设置轮廓的宽度。	2
border-bottom-left-radius	定义边框左下角的形状。	3
border-bottom-right-radius	定义边框右下角的形状。	3
border-image	简写属性，设置所有 border-image-* 属性。	3
border-image-outset	规定边框图像区域超出边框的量。	3
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。	3
border-image-slice	规定图像边框的向内偏移。	3
border-image-source	规定用作边框的图片。	3
border-image-width	规定图片边框的宽度。	3
border-radius	简写属性，设置所有四个 border-*-radius 属性。	3
border-top-left-radius	定义边框左上角的形状。	3
border-top-right-radius	定义边框右下角的形状。	3
box-decoration-break	�0�2	3
box-shadow	向方框添加一个或多个阴影。	3

Box 属性

属性	描述	CSS
overflow-x	如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。	3
overflow-y	如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。	3
overflow-style	规定溢出元素的首选滚动方法。	3
rotation	围绕由 rotation-point 属性定义的点对元素进行旋转。	3
rotation-point	定义距离上左边框边缘的偏移点。	3

QSS字体属性（Font）

属性	描述	CSS
font	在一个声明中设置所有字体属性。	1
font-family	规定文本的字体系列。	1
font-size	规定文本的字体尺寸。	1
font-size-adjust	为元素规定 aspect 值。	2
font-stretch	收缩或拉伸当前的字体系列。	2
font-style	规定文本的字体样式。	1
font-variant	规定是否以小型大写字母的字体显示文本。	1
font-weight	规定字体的粗细。	1

QSS外边距属性（Margin）

属性	描述	CSS
margin	在一个声明中设置所有外边距属性。	1
margin-bottom	设置元素的下外边距。	1
margin-left	设置元素的左外边距。	1
margin-right	设置元素的右外边距。	1
margin-top	设置元素的上外边距。	1

CSS 内边距属性（Padding）

属性	描述	CSS
padding	在一个声明中设置所有内边距属性。	1
padding-bottom	设置元素的下内边距。	1
padding-left	设置元素的左内边距。	1
padding-right	设置元素的右内边距。	1
padding-top	设置元素的上内边距。	1

CSS 定位属性（Positioning）

属性	描述	CSS
bottom	设置定位元素下外边距边界与其包含块下边界之间的偏移。	2
clear	规定元素的哪一侧不允许其他浮动元素。	1
clip	剪裁绝对定位元素。	2
cursor	规定要显示的光标的类型（形状）。	2
display	规定元素应该生成的框的类型。	1
float	规定框是否应该浮动。	1
left	设置定位元素左外边距边界与其包含块左边界之间的偏移。	2
overflow	规定当内容溢出元素框时发生的事情。	2
position	规定元素的定位类型。	2
right	设置定位元素右外边距边界与其包含块右边界之间的偏移。	2
top	设置定位元素的上外边距边界与其包含块上边界之间的偏移。	2
vertical-align	设置元素的垂直对齐方式。	1
visibility	规定元素是否可见。	2
z-index	设置元素的堆叠顺序。	2

CSS 文本属性（Text）

属性	描述	CSS
color	设置文本的颜色。	1
direction	规定文本的方向 / 书写方向。	2
letter-spacing	设置字符间距。	1
line-height	设置行高。	1
text-align	规定文本的水平对齐方式。	1
text-decoration	规定添加到文本的装饰效果。	1
text-indent	规定文本块首行的缩进。	1
text-shadow	规定添加到文本的阴影效果。	2
text-transform	控制文本的大小写。	1
unicode-bidi	设置文本方向。	2
white-space	规定如何处理元素中的空白。	1
word-spacing	设置单词间距。	1
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3

四.加载qss的方式

1.举个栗子

一般一个窗口对应定义一个qss文件，将该窗口中的所有控件qss放在其中，并将qss文件添加到资源文件中。

test.qss：

QMainWindow { 
border-image: url(:/res/car.jpg); 
}

加载qss文件

void MainWindow::loadQssFile()
{
    QFile file(":/res/test.qss");
    if(file.open(QIODevice::ReadOnly | QIODevice::Text))
    {
        qApp->setStyleSheet(file.readAll());
        file.close();
    }
}

Qt更多控件QSS使用例子，参考Qt帮助文档中：

Qt Style Sheets Examples:

https://doc.qt.io/qt-5/stylesheet-examples.html

https://blog.csdn.net/zyhse/article/details/105907181

2.使用方式

2.1.Qt Designer

在Qt Designer中，每个控件都有styleSheet属性，通过键入样式表，即可设置该控件的样式。如下图：

使用该方式的好处在于，可以直观看到设计效果，通过Ctrl+R就可以预览窗体设计。并且在编辑样式表窗口中添加资源、添加渐变、添加颜色、添加字体，方便直接编辑特定样式的颜色。此类方式编辑的样式表会作用于当前控件及其所有子控件。

2.2.QSS文件

使用QFile读入样式表，使用setStyleSheet进行设置。示例代码如下：

QApplication app(argc, argv);
QFile qss("StyleSheet.qss");
qss.open(QFile::ReadOnly);
app.setStyleSheet(qss.readAll());
qss.close();

此通过加载StyleSheet文件，对整个软件的所有控件样式进行设置。这种方式“一劳永逸”，可以设计自己的风格，所有软件重复使用。

总结：Qt Designer方便直接界面调试，并且可以对颜色进行编辑。适合设计时使用，当然也可以直接用作界面美化。当Qt Desinger编辑的样式表固定好之后，可以组织保存到QSS文件中，直接代码加载即可。

Qss开发过程

一.Qss开发步骤：

1） 添加资源文件qrc，在资源里添加qss文件，图片皮肤文件等。

2） 分界面在qss文件中设置各控件的属性值

Qss中配置一般按照如下格式配置：

控件类型#控件名称1,控件名称2,控件名称3

{

控件属性;

}

按钮属性设置

按钮为background背景图片的形式

QToolButton#addTimeBtn{//常规属性设置

font-size: 12px;

background: url(:/addanddeduct/image/add-l-16-normal.png) no-repeat center center;//背景图片资源中的路径，不重复，居中、居中显示。

background-repeat:no-repeat;//图片较小时，不显示个。

border-style: flat;//扁平

border-left:1px solid #CCCCCC;//边框线条粗细、虚实、颜色

}

QToolButton#addTimeBtn:hover{//按钮高亮属性设置

background: url(:/addanddeduct/image/add-l-16-hov.png) no-repeat center center;

background-repeat:no-repeat;

border-style: flat;

border-left:1px solid #CCCCCC;

}

QToolButton#addTimeBtn:pressed{//按钮按下时的属性设置

background: url(:/addanddeduct/image/add-l-16-pressed.png) no-repeat center center;

border-style: flat;

border-left:1px solid #CCCCCC;

}

按钮为qproperty-icon图片加文字的形式

/*删除报警按键设置*/

QToolButton#delAlarmBtn{

font-size: 12px;

border-style:inset;

border:0px solid #E5E5E5;

qproperty-icon: url(:/qss/image/lidaicon-h-trashcan.svg);

qproperty-iconSize: 16px 16px;//图片大小

qproperty-toolButtonStyle: ToolButtonTextBesideIcon;//文字和图片样式

}

QToolButton#delAlarmBtn:pressed{

color:#1C72DD;

border: 0px solid #1C72DD;

font-size: 12px;

border-style:inset;

qproperty-icon: url(:/qss/image/lidaicon-h-trashcan-pressed.svg);

qproperty-iconSize: 16px 16px;

qproperty-toolButtonStyle: ToolButtonTextBesideIcon;

}

QToolButton#delAlarmBtn:hover{

color:#4C99F8;

font-size: 12px;

border-style:inset;

border: 0px solid #4C99F8;

qproperty-icon: url(:/qss/image/lidaicon-h-trashcan-pressed.svg);

qproperty-iconSize: 16px 16px;

qproperty-toolButtonStyle: ToolButtonTextBesideIcon;

}

QCheckBox{

spacing: 5px;

color: black;

border-style: flat;

}

复选框QCheckBox属性设置

QCheckBox::indicator

{

width: 17px;

height: 17px;

image: url(:/checkImage/image/checkImage/check-nor.png);

}

QCheckBox::indicator:hover {

image: url(:/checkImage/image/checkImage/check-hov.png);

}

QCheckBox::indicator:checked{

image: url(:/checkImage/image/checkImage/check-sel.png);

}

QComboBox属性设置

QComboBox::drop-down:hover:pressed

{//下拉按钮设置

subcontrol-position:center right;//按钮位置

image:url(:/qss/image/angle-down.png);//按钮图片

}

QComboBox:drop-down

{

subcontrol-position:center right;

image:url(:/qss/image/angle-down-l-16.png);

}

QComboBox

{// QComboBox本身属性设置

border: 1px solid #CCCCCC;

border-radius: 2px;

}

QComboBox::hover

{//鼠标移上去，边框变蓝色

/* 边框宽度,线条样式,颜色 */

border:1px solid #2080F7;

/* 内边框 */

padding:1px 18px 1px 3px;

min-width:100px;

font:12px;

}

QComboBox QAbstractItemView

{//下拉列表中的选项设置

border: 1px solid #2080F7;

selection-//选中背景色

}

/*水平滚动条*/

QScrollBar:horizontal{

width:8px;

padding-top:0px;

padding-bottom:0px;

padding-right:0px;

padding-left:0px;

background: #000000;

border-radius:100px;

}

QScrollBar::handle:horizontal{

background:#E5E5E5;

width:8px;

border: 0px solid #E5E5E5;

min-height:20px;

border-radius:100px;

}

QScrollBar::handle:horizontal:normal{

background:#F5F5F5;

width:8px;

border: 0px solid #E5E5E5;

border-radius:100px;

}

QScrollBar::handle:horizontal:hover{

background:#E6E6E6;

width:8px;

border: 0px solid #E5E5E5;

border-radius:100px;

}

QScrollBar::handle:horizontal:pressed{

background:#CCCCCC;

width:8px;

border: 0px solid #E5E5E5;

border-radius:100px;

}

QScrollBar滚动条属性设置

/*垂直滚动条*/

QScrollBar:vertical

{

width:8px; //宽度

padding-top:4px; //内上边距设置

padding-bottom:0px;

padding-right:0px;

padding-left:0px;

background: #000000;

border-radius:100px;

}

QScrollBar::handle:vertical{ //滑块属性设置

background:#E5E5E5;

width:8px;

border: 0px solid #E5E5E5;

min-height:20px;

border-radius:100px;

}

QScrollBar::handle:vertical:normal{

background:#F5F5F5;

width:8px;

border: 0px solid #E5E5E5;

border-radius:100px;

}

QScrollBar::handle:vertical:hover{

background:#E6E6E6;

width:8px;

border: 0px solid #E5E5E5;

border-radius:100px;

}

QScrollBar::handle:vertical:pressed{

background:#CCCCCC;

width:8px;

border: 0px solid #E5E5E5;

border-radius:100px;

}

QScrollBar{

background: #000000;

}

QScrollBar::pressed

{

background: #000000;

}

QTableWidget属性设置

QTableWidget#tableWidget::Item

{

border:0px solid #E5E5E5;

border-bottom:1px solid #E5E5E5;

font-size: 12px;

color: #4C4C4C;

font - family: Microsoft YaHei;

alternate- /*行交替颜色*/

selection-background-color: #E9F2FE; /*选中行背景颜色*/

}

QTableWidget#tableWidget::Item:selected

{

background:#4C99F8;

}

QTableWidget表头属性设置

QHeaderView::section{

font-size: 12px;

color: #000000;

font - family: Microsoft YaHei;

font-weight: bold;

height:36px;/*表头高度*/

border-style: flat;

border-bottom:1px solid #E5E5E5;

border-top:0px solid #E5E5E5;

alignment: left;//左对齐

}

QTabWidget切换界面Tab属性设置

QTabWidget::pane //边框设置

{

border-top: 1px solid #E5E5E5;

border-left:1px solid #E5E5E5;

position: absolute;

font-size: 14px;

}

QTabWidget::tab-bar {

border-bottom: 2px solid #E5E5E5;

border-left:1px solid #E5E5E5;

alignment: left;

font-size: 14px;

}

QTabBar::tab {//切换按钮设置

border: none;

border-bottom-color: #C2C7CB; /* same as the pane color */

border-top-left-radius: 4px;//上左交界处的圆角

border-top-right-radius: 4px;

min-width: 8ex;

padding: 2px;

font-size: 14px;

}

QTabBar::tab:hover {

color:#2080F7;//选中高亮

}

QTabBar::tab:selected {

color:#2080F7;

border-bottom: 2px solid #2080F7;//下边框线条属性

font-weight:bold;//加粗

}

（3） 将qss文件添加到步骤（1）中添加的qrc资源文件中，注意每次修改之后都要重新加入。否则不生效。

（4） 在代码中访问qss文件，读取文件内容，通过setstylesheet函数设置属性

QByteArray CSkinCtrl::ReadAllContents(const QString& dir_name)

{

QByteArray content;

//获取路径下所有文件，如果是qrc路径呢？

QStringList file_name_list = QDir(dir_name).entryList(QDir::Files);

//将所有的读取的文件内容汇总到content

for each (QString file_name in file_name_list)

{

QFile file(dir_name + file_name);

if (file.open(QIODevice::ReadOnly))

{

content += file.readAll();

file.close();

}

//遍历子文件夹中的文件

QStringList dir_name_list = QDir(dir_name).entryList(QDir::Dirs);

for each (QString dir in dir_name_list)

{

content += ReadAllContents(dir_name + dir + "/");

}

return content;

}

调用读取函数，用qApp->setStyleSheet设置

QString gui_qss_path = ":/qss/iVMSGUIToolkit/";

QString client_qss_path = ":/qss/qss/";

qApp->setStyleSheet(ReadAllContents(gui_qss_path) + ReadAllContents(client_qss_path));

二.常用的QSS大全

1.标准色

aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, orange, purple, red, silver, teal, white, yellow

2.字体名字

微软雅黑：Microsoft YaHei
宋体：SimSun
黑体：SimHei
仿宋：FangSong
楷体：KaiTi
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei

免责声明：文仅供参考，来源网络，部分属原创，版权归原著所有，如涉版权，请联系删除！

qt语法

二.Qss的功能

2.共享属性

3.选择器（selector）

4.伪状态（Pseudo-States）

一.举个栗子

二.选择器

1.通用选择器

2.类型选择器

3.类选择器

".+类名"作为选择器,仅作用于本类

“. + class的属性值” 作为选择器

4.ID选择器

总结：

总结：

6.包含选择器

7.子元素选择器

8.伪类选择器

9.Subcontrol选择器

三.属性

四.加载qss的方式

1.举个栗子

2.使用方式

2.1.Qt Designer

2.2.QSS文件

一.Qss开发步骤：

二.常用的QSS大全

1.标准色

2.字体名字

发表评论

发表回复

二.Qss的功能

2.共享属性

3.选择器（selector）

4.伪状态（Pseudo-States）

一.举个栗子

二.选择器

1.通用选择器

2.类型选择器

3.类选择器

".+类名"作为选择器,仅作用于本类

“. + class的属性值” 作为选择器

4.ID选择器

总结：

总结：

6.包含选择器

7.子元素选择器

8.伪类选择器

9.Subcontrol选择器

三.属性

四.加载qss的方式

1.举个栗子

2.使用方式

2.1.Qt Designer

2.2.QSS文件

一.Qss开发步骤：

二.常用的QSS大全

1.标准色

2.字体名字

相关文章

发表评论

发表回复